Question

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

<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|
+-+    +-+    +-+

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

所以，在我上面的初始代码中，如何让.imgpos_1在段落上，而.imgpos_5在段落中。或者我是否需要以某种方式重新安排我的标记？

即。我上面的代码会导致这个ascii-rendition：

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

感谢任何帮助。

Answer 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>

Answer 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>

图像对齐段落

2 个答案: