段落周围的图像对齐答案

【问题标题】：image alignment around paragraph段落周围的图像对齐
【发布时间】：2012-05-10 22:17:06
【问题描述】：

所以，我基本上有这个代码：

<div class='imgpos_1'><img></div>
<div class='imgpos_3'><img></div>
<div class='imgpos_5'><img></div>
<div class='paragraph'>My text</div>

并且图像位置都应该在段落周围浮动。在伪ASCII中：

+-+    +-+    +-+
|1|    |2|    |3|
+-+    +-+    +-+
+-+ My text a +-+
|4| nd my par |5|
+-+ agraph    +-+
+-+    +-+    +-+
|6|    |7|    |8|
+-+    +-+    +-+

所以，解释一下。位置 1-3 应该在段落的左侧、居中和右对齐ABOVE。位置 4 和 5 应在段落内左右对齐，位置 6-8 与 1-3 相同，仅在段落下方。

所以，在我上面的初始代码中，如何让 .imgpos_1 在段落左侧在上浮动，而 .imgpos_5 在段落右侧在内浮动。还是我需要以某种方式重新排列我的标记？

即我上面的代码会导致这个 ascii 再现：

+-+           +-+
|1|           |3|
+-+           +-+
My text and m +-+
y paragraph   |5|
              +-+

感谢任何帮助。

【问题讨论】：

图片尺寸是固定的吗？
嗯，不。它们的宽度为 100%，然后将它们所在的 DIV 设置为百分比宽度。
所以图片是水平拉伸的？垂直也是？

标签： html css alignment css-float

【解决方案1】：

<style>
.img_pos { float: left; }
.clearer { clear: left; }
</style>

<div class="img_pos">1<img></div>
<div class="img_pos">2<img></div>
<div class="img_pos">3<img></div>

<div class="img_pos clearer">4<img></div>
<div class="img_pos paragraph">Text</div>
<div class="img_pos">5<img></div>

<div class="img_pos clearer">6<img></div>
<div class="img_pos">7<img></div>
<div class="img_pos">8<img></div>

指定元素的尺寸是非常可取的。

另一种解决方案：

<style>
.wrapper { display: table; }
.row { display: table-row; }
.row * { display: inline; } /* for IE */
.cell { display: table-cell; width: 33%; }
</style>

<div class="wrapper">
    <div class="row">
        <div class="cell"><img></div>
        <div class="cell"><img></div>
        <div class="cell"><img></div>
    </div>
    <div class="row">
        <div class="cell"><img></div>
        <div class="cell">
            <p>...lorem ipsum dolor sit amet...</p>
        </div>
        <div class="cell"><img></div>
    </div>
    <div class="row">
        <div class="cell"><img></div>
        <div class="cell"><img></div>
        <div class="cell"><img></div>
    </div>
</div>

【讨论】：

我不确定我是否理解您的代码。是的，IMG 标签有 w/h，但是在上面的代码中，位置 5 的 img 如何浮动到段落的右侧？
img 被 div 包裹，其中有 "float: left;"。所以它浮动到上一个元素。

【解决方案2】：

结帐960.gs。您将能够毫无问题地布局组件。

<div class="container_12">
    <div class="grid_4"><img ></div>
    <div class="grid_4"><img ></div>
    <div class="grid_4"><img ></div>

    <div class="grid_4"><img ></div>
    <div class="grid_4">Your text here</div>
    <div class="grid_4"><img ></div>

    <div class="grid_4"><img ></div>
    <div class="grid_4"><img ></div>
    <div class="grid_4"><img ></div>
</div>

【讨论】：