Блог

Главная - Вопросы по программированию - Поместить divs ниже float: левые divs

Поместить divs ниже float: левые divs

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать сайт с базовой структурой: 

 <1 div>  
<3 divs next to each other>  
<1 div>

3 divs — это float: left, чтобы быть на одном уровне. Тем не менее, 5-й div (внизу) как бы перемещается вверх до вершины 3 divs в IE и отображается так же в Chrome, хотя содержимое находится ниже 3 divs.
Я думаю, что я только что сделал здесь ленивое кодирование, но на самом деле не знаю ничего лучше.
В настоящее время у меня есть: 

 <div id="results">
<!-- Ajax Content Here -->
</div>
<div id="leftpanel">
</div>
<div id="photo">
</div>
<div id="top3">
</div>
<div id="voting">
</div>

Результаты являются верхними, leftpanel, photo и top3 являются средними 3, в то время как голосование ниже 3.
Базовый CSS — это :

 #leftpanel {
float:left;
width:20%;
height: 600px;
}

#top3 {
float: left;
width:20%
}

#photo {
width: 60%;
float:left;
text-align: center;
}

#voting {
width: 500px;
height: 250px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#results{
width: 300px;
height: 20px;
margin-left: auto;
margin-right:auto;
margin-bottom: 5px;
text-align: center;
}

Я уверен, что я делаю что-то глупое, поэтому любой ввод очень ценится, я мог бы использовать, чтобы узнать, как это сделать правильно 🙂 Ранее у меня был div, содержащий 3 средних divs, но это не сработало, поскольку те, что внутри, меняют размер. Может быть, мне нужно сделать это, но по-другому?

Ответ №1:

добавьте clear: both в нижний div, чтобы на него не влияли другие плавающие divs, а перемещались под ними.

Ответ №2:

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

http://jsfiddle.net/scMFC/

Ответ №3:

Вам нужно очистить поплавки. Если #voting это ваш пятый div, добавьте это в свой css.

#voting{clear:both}

должно сработать