Блог

Главная - Вопросы по программированию - Автоматическая настройка div на основе внутреннего содержимого

Автоматическая настройка div на основе внутреннего содержимого

#html #css #layout

#HTML #css #макет

Вопрос:

итак, я пытаюсь автоматически настроить высоту divs на основе высоты содержимого внутри него. Это моя текущая работа:

 <div id="content">
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
</div>

#content {
margin: 0px auto;
margin-top: 10px;
border: 1px solid;
width: 920px;
}

#item {
display: block;
width: 220px;
height: 250px;
border: 1px solid;
margin-left: 6px;
margin-bottom: 5px;
float: left;
}

Я обнаружил, что, когда я НЕ применяю ‘float: left’ к разделам ‘item’, это работает, однако, когда я применяю float: left, высота не устанавливается на основе содержимого внутри. Есть идеи о том, как это исправить?

Комментарии:

1. совет: вы не должны повторять ID в html. Вопрос: почему вы не можете использовать float :left ?

Ответ №1:

Применить overflow: hidden; к #content или очистить плавающий.

Также каждый используемый вами идентификатор должен быть уникальным в документе. нехорошо использовать идентификатор, как вы сделали здесь:

 <div id="item"></div>
<div id="item"></div>

Используйте class атрибут для таких вещей.

Демонстрация с переполнением:http://jsfiddle.net/9WSFf/1 /

Во-вторых, вы могли бы сделать что-то вроде этого:

 #content:after
{
    content:"";
    clear:left;
    display: block;
}

Демонстрация:http://jsfiddle.net/9WSFf/2 /

Ответ №2:

Это потому, что элементы перемещаются. Когда элемент перемещается, он удаляется из обычного потока документа. Вот почему родительский div сворачивается, когда вы перемещаете элементы div.

Вы должны использовать четкое исправление.

Один из способов — добавить div после последнего элемента div и добавить clear:both стиль в нем.

Другой способ — использовать некоторый «взлом» родительского div:

 .parent:before,
.parent:after {
    content: "";
    display: table;
} 
.parent:after {
    clear: both;
}

Ответ №3:

Вы применили статическую высоту к #item, удалите это свойство, и оно автоматически изменит размер по высоте.

Ответ №4:

Пожалуйста, проверьте эту скрипку JS

CSS

 #content {
  margin: 0px auto;
  margin-top: 10px;
  border: 1px solid;
  width: 920px;
 }
.clear {
  clear:both;
 }
 #item {
    display: block;
    width: 220px;
    height: 250px;
    border: 1px solid;
    margin-left: 6px;
    margin-bottom: 5px;
    float: left;
  }

Пожалуйста, примените clear: оба после последнего идентификатора элемента div