html - 使用 CSS 将文本流中的图像移动到右侧

Question

我有一些基本的标记:

<div class="page_content">
    <p>A paragraph of text.</p>
    <p>Another paragraph of text.</p>
    <img src="image.jpg" />
    <p>Some more text.</p> 
</div>

段落大小有限制，即.page_content p{min-width:24em;max-width:36em}。我的目标是响应式布局。

在较大的浏览器宽度下，我想将图像移出主要文本流以实现沿这些线的布局(注意上面 html 中的图像可能与下面显示的位置不匹配!):

    ===== = Image    --------    --------    --------    -------- ======    -------- ======    -------- ======    --------    --------    --------    --------

如果我 float:right 图像，它们会从文本中快速移动，它们的上边缘与它们的“父”段落对齐。但是，它们一直对齐到页面的右侧。我似乎无法找到一种方法让他们与他们坐在一起的段落的右侧齐平。

我不想将图像移出主 page_content div，因为在小屏幕宽度下我希望图像出现在与文本相同的“列”中 - 响应式设计。

关于如何实现这一点有什么想法吗？是否可以？我已经玩了几个小时，但一点都不聪明!

Answer 1

我会按照以下方式做一些事情: http://jsfiddle.net/RjDaS/16/

我会将每个 paragraf 标签包装在一个 div 中(这个有一个名为 section 的类)，并让图像紧挨着它。这也适用于您的响应式设计。但是我无法让您的图像留在 page_content div 中。

<div class="page_content">
    <p>A paragraph of text.</p>
    <div class="Section">
        <p>Another paragraph of text.</p>
        <img src="image.jpg" />
    </div >
    <p>Some more text.</p> 

</div>

CSS:

.Section p{

    float:left;
    /*min-width:24em;*/
    max-width:36em;
        margin-right:10px;
}
.Section img{
    float:left;
}
.Section{
    overflow:hidden;
}
​
​

编辑:向左添加了 float ，因此它会靠近 p 标签。 (删除最小宽度以获得更好的可视化效果)