Блог

У меня есть две строки с DIV в каждой строке. В первой строке есть 3 div. Во второй строке есть 2 div, оставляя последний столбец пустым. Каждый div настроен на встроенный блок, чтобы они могли находиться рядом друг с другом.

3-й div в первой строке имеет сворачиваемую ссылку, которая расширяется при нажатии. Div становится длиннее, чем остальные в той же строке.

Когда этот div расширяется, он естественным образом выталкивает div во вторую строку. Я бы хотел, чтобы элементы div во второй строке не были сдвинуты вниз. Как я могу этого добиться?

Вот рисунок того, чего я хотел бы достичь.

Я не знаю цели вашего кода, но вы можете разделить их на столбцы и избежать отрицательных полей, если это работает для вас, поиграйте здесь:

HTML:

 <div id="Column1">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block clear"></div>
    <div class="block"></div>
</div>
<div class="block big"></div>
 

CSS:

 #Column1 {
    float: left;
}

.block {
    width: 50px;
    height: 80px;
    background: grey;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.clear {
    clear: both;
}

.big {
    height: 170px;
}
 

Или же, используя отрицательные поля (скрипка здесь):

HTML:

 <div class="block"></div>
<div class="block"></div>
<div class="block big"></div>
<div class="block clear"></div>
<div class="block"></div>
 

CSS:

 .block {
    width: 50px;
    height: 80px;
    background: grey;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.clear {
    clear: both;
}

.big {
    height: 170px;
    margin-bottom: -80px;
}
 

содержимое, выталкиваемое сюда, является нормальным

возможное решение — убрать дополнительное пространство, добавленное с помощью отрицательного поля

 margin-bottom:-90px;
 

http://jsfiddle.net/ddtp9/1/