如何围绕响应式 CSS 侧边栏包装内容（包括图像）

Question

这是我要实现的布局：

我的内容目前是一系列基本的块 HTML 元素（h[1-5]、p、ul 等）包含在 div，如果可能的话，我想让它们保持这种状态。所有图像都在自己的 p 内，以便响应地调整大小

我已经能够在创建侧边栏的内容顶部添加一个 div style="float:right" 并在其周围环绕 "normal" 文本内容 - 特别是上图中的第一段。但是，设置为 100% 的 img 不会换行，它会在侧边栏下方流动。

所以真的，我希望图像具有两种宽度之一 - 如果图像顶部 "should be" 在侧边栏底部上方，则为 100%-width(sidebar)，如果顶部为 100%图片的位于边栏底部下方。

我当然可以在调试页面时手动设置图片的宽度，设置为小于 100%-width(sidebar) 的值，它会直接跳到位，所以浏览器清楚地知道那个尺寸是多少不要 "push" 边栏下方的图片...

这是我想让它起作用的实际页面；请注意，第一张图片位于侧边栏下方：

https://adventuretaco.com/?p=3655&draftsforfriends=kIq7mVDhNtCSklITGCJs2HAcE9xuPX8d

此外，这里是 CSS 和 HTML，我目前拥有的 post 内容：

CSS

p {
    margin: 0 0 1.25em 0;
}

ol, ul {
    margin: 0 1.5em 1.25em 1.5em;
}

.full-width-container {
    width: 100%;
}

.full-width-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    transition: 0.5s;
}

.full-width-container img.flickrPhoto {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    transition: 0.5s;
}

HTML

<div class="post-content">
<p>As you may recall, we'd just cancelled our flight home due to the unknowns of Covid-19, but were still in exploration mode as we entered the Valley of Fire State Park in southeastern Nevada.</p>
<p id="photoContainer132" class="full-width-container"><img id="photo132" class="flickrPhoto" src="https://live.staticflickr.com/65535/49714173358_d19b1c2e70_n.jpg" /></p>
<p>Our trip to the Valley of Fire was somewhat opportunistic to say the least. A year before this trip ever even crossed my mind, I'd seen a photo on Flickr that had caught my eye. Sharp as ever, I completely forgot to save the photo or a link to the photo <img src="https://www.tacomaworld.com/styles/default/my/smilies/annoyed_gaah.gif" />, but - luckily for me - the photo had been geotagged <em>and</em> I'd saved a point of interest in my Google Earth map of Nevada. I'd noticed that point as I'd planned this trip, and mapped out the route, excited to see what nature had in store. So yeah, apparently, I'm not <em>always</em> as dumb as I look. <img src="https://www.tacomaworld.com/styles/default/my/smilies/original/wink.png" /> In researching Valley of Fire, I also discovered a second hike -rumored to have petroglyphs - and since it was on our way to the main attraction, we decided to stop off there first.</p>
<p id="photoContainer133" class="full-width-container"><img id="photo133" class="flickrPhoto" src="https://live.staticflickr.com/65535/49715029457_a61cffc61b_n.jpg" /></p>
</div>

Answer 1

我认为你首先需要缩小你的图像，由于它们的大小，在你想做的范围内操作它们变得有点困难。您可以在标签内或从 css 文件中更改它们。然后，您可以在该代码内部使用 .full-width-container img 中的 "float: left;"，给它一个边距，让它们并排放置。

Answer 2

好的，经过更多的研究、试验和错误，我得出的结论是这个问题的答案是不能单独用 CSS / layout 来解决。

最后，合并Javascript解决了问题。它并不完美 - 如果图像已缩小以在侧边栏周围流动，那么当浏览器 window 变大时，它们不会尽可能理想地变大变大。

这是我结束的地方；工作示例（在此处向下滚动以查看侧边栏） https://adventuretaco.com/hidden-valleys-secret-tinaja-mojave-east-5/#photoContainer190

// start shortly after page is rendered
setTimeout(resizeImagesForFacebookEmbed, 500);

function resizeImagesForFacebookEmbed() {
    var tryAgain = true;

    // find each of the elements that make up the post, and iterate through each of them
    var content = jQuery('div.post-content').children().each(function () {
        if (this.tagName.toLowerCase() == 'p') {
            var firstChild = this.firstChild;
            var firstElementChild = this.firstElementChild;

            if (firstChild != null && firstChild == this.firstElementChild && firstElementChild.tagName.toLowerCase() == 'img') {
                var pRect = this.getBoundingClientRect();
                var imgRect = firstChild.getBoundingClientRect();

                var difference = imgRect.top - pRect.top;

                // if the image contained in the p is not at the top of the p, then make it smaller
                // so it will fit next to the embed, which is 350px wide
                if (difference > 25 || imgRect.width < (pRect.width - 400)) {

                    var sidebarLeft = document.getElementById("fbSidebar").getBoundingClientRect().left;
                    var imgLeft = firstChild.getBoundingClientRect().left;
                    var imgWidth = (sidebarLeft - imgLeft) * .95;

                    firstChild.style.width = imgWidth + "px";
                    tryAgain = false;
                    setTimeout(resizeImagesForFacebookEmbed, 1000);

                } else {
                    // do nothing
                }
            }
        }
    });

    if (tryAgain)
        setTimeout(resizeImagesForFacebookEmbed, 1000);
}

var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
            clearTimeout(timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
    };
})();

// handle window resize event to re-layout images
jQuery(function () {
    jQuery(window).resize(function () {
        waitForFinalEvent(function () {
            resizeImagesForFacebookEmbed();
        }, 500, "atFbEmbedId"); // replace with a uniqueId for each use
    });
});

如何围绕响应式 CSS 侧边栏包装内容（包括图像）

How to wrap content - including images - around a responsive CSS sidebar

html

css

sidebar

css-float