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

Question

这是我想要实现的布局：

我的内容目前是包含在div 中的一系列基本的块 HTML 元素（h[1-5]、p、ul 等），如果可能的话，我希望保持这种方式.所有图片都在自己的p 内，以便响应式调整大小

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

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

我当然可以在调试页面时手动设置图像的宽度，设置为小于 100%-width(sidebar) 的值，它会直接跳到适当的位置，所以浏览器清楚地知道该大小是什么将图像“推”到侧边栏下方...

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

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

此外，这里是我目前用于帖子内容的 CSS 和 HTML：

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 文件中更改它们。然后，您可以在该代码内部使用“float：left;”在 .full-width-container img 中，给它一个边距，让它们并排放置。

Answer 2

好的，经过大量研究、反复试验，我得出的结论是，这个问题的答案是不能单独使用 CSS/布局来解决。

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

这就是我的结局；工作示例（向下滚动查看侧边栏） 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
    });
});