Как разместить DIV прямо во втором ряду встроенных DIV на относительно позиционированной веб-странице? - PullRequest
Новая
       26

Как разместить DIV прямо во втором ряду встроенных DIV на относительно позиционированной веб-странице?

0 голосов
/ 20 августа 2011

У меня относительно позиционированная веб-страница - она ​​увеличивается и уменьшается с разрешением экрана пользователя. Поскольку мой сценарий легче нарисовать, вот мой упрощенный макет:

simplified layout

А вот и упрощенный HTML: 

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="ad"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
etc...

CSS выглядит так: 

.box { width:200px;height:300px;display:inline-block;*display:inline;margin-right:20px }
.ad { width:420px;height:300px;float:right }

Моя проблема показана на картинке - мне нужно, чтобы .ad плавал вправо, но во втором ряду. Он отлично работает в других браузерах, но проблема заключается в IE, он просто помещает .ad в следующий ряд (третий ряд). Есть ли кроссбраузер (IE7 и выше), возможно чистый CSS (не условие, можно использовать JS) для этого?

Большое спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 20 августа 2011

Это, кажется, работает в IE для меня, я добавил оболочку с фиксированной шириной, чтобы содержать ее, но она должна работать без ширины.: 

<div class='wrapper'>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="ad"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS 

.box { 
    width:100px;
    background:red;
    height:100px;
    float:left;
    margin:5px 
}
.ad {
    display:inline-block;
    position:relative; 
    background:green;
    width:200px;
    height:100px;
    margin:5px;
}
.wrapper{
    text-align:right;
    float:left;
    width:330px;
}

Что я сделал: Ящики просто плавают и заполняют открытое пространство слева направо.Объявление отображается в виде встроенного блока, поэтому на него влияет выравнивание текста на оболочке.Объявление будет перетягиваться вправо, блоки заполняют другое пространство.

0 голосов
/ 20 августа 2011

Похоже, это своего рода сеточная система, такая как http://960.gs/ - есть несколько каркасов CSS-сеток, и я подозреваю, что они уже решили эту проблему ...

...