it-swarm.com.ru

Как заставить div расти в росте, плавая внутри

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

114
pedrozath

overflow:auto; на содержащем div делает все внутри него (даже плавающие элементы) видимым, а внешний div полностью оборачивается вокруг них. Смотрите этот пример:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}
<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>
264
JakeParis

Есть больше чем один способ очистить поплавки. Вы можете проверить некоторые здесь:
http://work.arounds.org/issue/3/clearing-floats/

Например, clear:both может работать для вас

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }
14
Nikita Rybak

Во многих случаях overflow: auto; будет достаточно, но для завершения и поддержки нескольких браузеров, посмотрите на Clearfix , который сделает работу для всех браузеров.

Давайте рассмотрим следующую разметку.

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Наряду со следующими стилями ..

.content { float:left; }

.clearfix { ..from link.. }

Без clearfix родительский div не имел бы высоты из-за плавающих дочерних элементов. Очистка заставит родителя учитывать плавающие дочерние элементы.

11
miphe

Я подумал, что отличный способ сделать это - установить display: table в div.

7
pedrozath