Позиция div под плавающим div

Question

Простая проблема сегодня, но не может найти решение. У меня есть четыре divs - я бы хотел, чтобы #down был помещен прямо под #up, но в течение моей жизни я не могу понять это. Вот мой CSS и HTML.

#up { 
 
    width: 33.3%; 
 
    height: 100px; 
 
    background: #CCCCCC; 
 
    float: left; 
 
} 
 
#down { 
 
    width: 33.3%; 
 
    height: 100px; 
 
    background: #999999; 
 
    float: left; 
 
} 
 
#mid { 
 
    width: 33.3%; 
 
    height: 200px; 
 
    background: #999999; 
 
    float: left; 
 
} 
 
#right { 
 
    width: 33.3%; 
 
    height: 200px; 
 
    background: #CCCCCC; 
 
    float: left; 
 
}

<div id="up"></div> 
 
<div id="mid"></div> 
 
<div id="right"></div> 
 
<div id="down"></div>

элементы должны оставаться поплыл влево.

Answer 1

может быть, попробовать с дополнительным DIV, чтобы получить вверх и вниз вместе?

<div id="up_down"> 
<div id="up"></div> 
<div id="down"></div></div> 
<div id="mid"></div> 
<div id="right"></div> 

И вы изменили CSS для:

up_down{ 
width: 33.3%; 
height: 200px; 
} 

#up { 
width: 100%; 
height: 50%; 
background: #CCCCCC; 
float: left; 
} 
#down { 
width: 100%; 
height: 50%; 
background: #999999; 
float: left; 
} 

Answer 2

Вместо того, чтобы работать с поплавками, вы можете просто настроить атрибут отображения средних div на «встроенный блок». Помните, что по умолчанию элементы div имеют отображение блоков, что означает, что они занимают всю ширину его родительского элемента, даже если его ширина меньше ширины родителя. встроенные блоки, с другой стороны, подходят друг другу, как кусочки головоломки, и текут горизонтально, а не вертикально.

Answer 3

Как @isherwoord говорит в первом комментарии, завернуть Div # вверх и вниз Div # вместе в другой DIV, Forexample сНу # колонке

(я надеюсь, вы не возражаете путь Haml написания HTML.)

div#column 
    div#up 
    div#down 

div#middle 
div#right 

Answer 4

Если вы знаете высоты/ширину вы можете просто установить верхнюю позицию #down с position:relative;top:-100px;, чтобы вытащить его обратно.

Пример:

#up { 
 
    width: 33.3%; 
 
    height: 100px; 
 
    background: #CCCCCC; 
 
    float: left; 
 
} 
 
#down { 
 
    width: 33.3%; 
 
    height: 100px; 
 
    background: #999999; 
 
    float: left; 
 
    position:relative; 
 
    top:-100px; 
 
} 
 
#mid { 
 
    width: 33.3%; 
 
    height: 200px; 
 
    background: #999999; 
 
    float: left; 
 
} 
 
#right { 
 
    width: 33.3%; 
 
    height: 200px; 
 
    background: #CCCCCC; 
 
    float: left; 
 
}

<div id="up"></div> 
 
<div id="mid"></div> 
 
<div id="right"></div> 
 
<div id="down"></div>