Як змусити диву зростати у висоту, маючи всередині плавання

121

Як я можу змусити діву зрости свою висоту, коли він всередині нього пливе? Я знаю, що визначення значення ширини та встановлення переповнення прихованих робіт. Проблема полягає в тому, що мені потрібен div з видимим переповненням. Будь-які ідеї?

— педрозат
джерело

278

overflow:auto;на диві, що міститься, роблять усе видиме всередині нього (навіть плаваючі предмети), а зовнішній дів повністю обертається навколо них. Дивіться цей приклад:

.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>

Розгорніть фрагмент

— JakeParis
джерело

7

Так, це ніби працює, але це небезпека створення полос прокрутки .. правда?

— педрозат

1

Ні, не те, що я знаю про @pedro. Зовнішній div повинен просто продовжувати розширюватися, щоб обернути внутрішні знаки. спробуй це у скрипці, збільши розміри внутрішніх дівок і подивись, що відбувається.

— JakeParis

2

Я спробував це, і праворуч від вікна веб-переглядача з'явилася крихітна смуга прокрутки розміром приблизно 2ем.

— Найджел Олдертон

1

@NigelAlderton це сталося для мене, тому що я змушував висоту контейнера (куди overflowбуло додано). Виправлено це шляхом вилучення overflow: auto;з класу, а також heightселектора

— eggy

16

Існує не один спосіб очистити поплавці. Перевірити їх можна тут:
http://work.arounds.org/issue/3/clearing-floats/

Наприклад, clear:bothможе працювати для вас

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

#element { zoom:1; }

— Микита Рибак
джерело

1

Перевага такого підходу полягає в тому, що він overflow: auto;буде вирізати вміст (як оздоблення фокусом), який переповнюється поза елементом, але це не буде.

— Ден

overflow: автоматично створив горизонтальну смугу прокрутки для мене, тому я не міг її використовувати. Це спрацювало чудово.

— Edwin Stoteler

Саме те, що я шукав. Застосував цей CSS до батьківського. Він розширює висоту батьківського <div>, так що плаваючий елемент залишається всередині нього. Елегантний, бо чітко сказано, що: "дно батьків має очистити поплавок".

— IAM_AL_X

12

У багатьох випадках 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.. }

Без чіткого виправлення батько divне мав би зросту через те, що він плаває дітьми. Очищення змусить батьків вважати плаваючих дітей.

— міфе
джерело

2

Clearfix - це додаткова розмітка. Просто дайте батьківському overflow: auto;

— ділу

7

Я подумав, що чудовий спосіб зробити це встановлення display: tableна діві.

— педрозат
джерело