выравнивание изображения вокруг абзаца - PullRequest
Новая
       5

выравнивание изображения вокруг абзаца

1 голос
/ 30 июня 2011

Итак, у меня в основном есть этот код: 

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

И позиции изображения должны все по-разному плавать вокруг абзаца.В псевдо-асии: 

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

Итак, объясним.ПОЛОЖЕНИЕ 1-3 Должно быть слева, по центру и выровнено по правому краю НАД абзацем.Позиции 4 и 5 должны быть выровнены по левому и правому краям внутри абзаца, а позиции 6-8 - это то же самое, что и 1-3, только под абзацем.

Итак, в моем исходном коде выше, как мнезаставить .imgpos_1 плавать влево над абзацем, в то время как .imgpos_5 плавать вправо внутри абзаца.Или мне нужно каким-то образом переставить разметку?

Т.е. мой приведенный выше код приведет к такому ascii-представлению: 

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

Любая помощь приветствуется.

Ответы [ 2 ]

1 голос
/ 30 июня 2011 
<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>
0 голосов
/ 01 июля 2011

Оформить заказ 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>
...