Вопрос по css, html, css-float – Высота div обертки равна 0 с плавающими элементами внутри

16

У меня есть обертка<div> который содержит два внутренних<div>с плавающей.

<div class="outside" style="border:1px solid #555;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

Проблема в обертке<div> имеет ширину 80 пикселей с двумя внутренними<div> 40px каждый. Но всегда обертка<div> является0px в высоте, которая заставляет границу казаться линией наверху.

Поэтому я поместил два внутренних<div>с внутри<table>, Это сработало хорошо. Но как мне избежать этой проблемы, не идя на<table>?

возможный дубликатWhich method of ‘clearfix’ is best? Oriol

Ваш Ответ

3   ответа
2

Попробуй это:

<div class="outside" style="border:1px solid #555; overflow:auto">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>//Outside container close
46

Задаватьoverflow: hidden на родителя.

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>
Мне интересно, почему он так рушится?
10

Внешнийdiv являетсярушится потому что двое детейdivвнутри него плавают. Самым простым решением для этого является установкаoverflow: hidden; на внешнемdiv.

Похожие вопросы