如何在响应的CSS侧边栏周围包裹内容-包括图像->

Question

这是我要实现的布局：

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

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

所以，我确实希望图像具有两种宽度之一-如果图像的顶部“应该”在侧边栏的底部上方，则为100％-width（sidebar）；如果图像的顶部为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>

这是我要实现的布局：目前，我的内容是div中包含的一系列基本的，块HTML元素（h [1-5]，p，ul等），如果可能，我会喜欢保持这种方式。全部...

Answer 1

我认为您首先需要缩小图像的尺寸，由于图像的尺寸，在您想要的范围内进行操作变得有些困难。您可以在标签内或从CSS文件中更改它们。然后，您可以在代码内部使用“ float：left;”。在.full-width-container img中，给它留个边距，以使它们并排。