2

我有一些基本的标记：

<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 中的 nb 图像可能与下面显示的位置不匹配！）：

    ===== = 图片

    --------
    --------
    --------

    -------- ======
    -------- ======
    -------- ======
    --------

    --------
    --------
    --------

如果我float:right是图像，它们会从文本中滑出，顶部边缘与它们的“父”段落一致。但是，它们一直对齐到页面的右侧。我似乎无法找到一种方法让它们与它们所在段落的右侧齐平。

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

关于如何实现这一点的任何想法？可能吗？我已经玩了几个小时，但我一点也不聪明！

4

1 回答 1

2

我会这样做：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>

​</p>

CSS：

.Section p{

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

编辑：向左添加浮动，使其靠近 p 标签。（删除了 min-width 以获得更好的可视化）

于 2012-12-17T20:33:04.147 回答