Как сделать div, чтобы обернуть два плавающих div внутри? - PullRequest
Новая
       17

Как сделать div, чтобы обернуть два плавающих div внутри?

72 голосов
/ 04 декабря 2009

Я не знаю, является ли это общей проблемой, но я пока не могу найти решение в сети. Я бы хотел, чтобы два div-элемента были обернуты внутри другого div-элемента, однако эти два div-элемента внутри должны быть выровнены на одном уровне (например: левый занимает 20% ширины wrappedDiv, правый - еще 80%) Для достижения этой цели я использовал следующий пример CSS. Тем не менее, теперь упаковка DIV не обернула все эти элементы. Оберточный элемент Div имеет небольшую высоту, чем эти два элемента Div, содержащиеся внутри. Как я могу убедиться, что div-обтекатель имеет наибольшую высоту, как у div-элементов? Спасибо !!! 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>liquid test</title>
    <style type="text/css" media="screen">
        body
        {
            margin: 0;
            padding: 0;
            height:100%;
        }
        #nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          height:100%;
        }

</style>
</head>
<body>
<div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
</div>
</body>
</html>

Ответы [ 11 ]

117 голосов
/ 04 декабря 2009

Помимо взлома clear: both, вы можете пропустить дополнительный элемент и использовать overflow: hidden на упаковке div: 

<div style="overflow: hidden;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>
72 голосов
/ 04 декабря 2009

Это общая проблема, когда у вас есть два поплавка внутри блока. Лучший способ исправить это - использовать clear:both после второго div. 

<div style="display: block; clear: both;"></div>

Это должно заставить контейнер иметь правильную высоту.

8 голосов
/ 04 декабря 2009

overflow:hidden (как упомянуто @Mikael S) не работает в каждой ситуации, но должно работать в большинстве ситуаций.

Другой вариант - использовать трюк :after: 

<div class="wrapper">
  <div class="col"></div>
  <div class="col"></div>
</div>

.wrapper {
  min-height: 1px; /* Required for IE7 */
  }

.wrapper:after {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  content: ".";
  font-size: 0;
  }

.col {
  display: inline;
  float: left;
  }

А для IE6: 

.wrapper { height: 1px; }
8 голосов
/ 04 декабря 2009

Это должно сделать это: 

<div id="wrap">
  <div id="nav"></div>
  <div id="content"></div>
  <div style="clear:both"></div>
</div>
4 голосов
/ 24 августа 2010

Плавай всем.

Если у вас есть плавающее div внутри неплавающего div, все становится чокнутым. Вот почему большинство CSS-фреймворков, таких как Blueprint и 960.gs, используют плавающие контейнеры и divs.

Чтобы ответить на ваш конкретный вопрос, 

<div class="container">
<!--
.container {
  float: left;
  width: 100%;
}
-->
  <div class="sidebar">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
  <div class="content">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
</div>

должно работать нормально, если вы float:left; все ваши <div> s.

3 голосов
/ 22 августа 2011

Используйте этот CSS-хак, он избавил меня от многих хлопот и времени.

http://swiftthemes.com/2009/12/css-tips-and-hacks/problem-with-height-of-div-containing-floats-and-inline-lists/

Я использую его в каждом проекте.

2 голосов
/ 15 сентября 2015

Здесь я покажу вам фрагмент, где ваша проблема решена (я знаю, что прошло слишком много времени с тех пор, как вы ее опубликовали, но я думаю, что это чище, чем исправление de "clear") 

#nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          overflow: hidden
        }
    <div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
    </div>
2 голосов
/ 22 января 2014

Вот еще один, я нашел полезным. Это работает даже для адаптивного дизайна CSS тоже. 

#wrap
{
   display: table;
   table-layout: fixed; /* it'll enable the div to be responsive */
   width: 100%; /* as display table will shrink the div to content-wide */
}

ВНИМАНИЕ: Но эта теория не сработает, поскольку держатель содержит внутренние элементы с абсолютными позициями. И это создаст проблему для размещения с фиксированной шириной. Но для адаптивного дизайна это просто отлично. :)

ДОПОЛНЕНИЕ К Meep3D ОТВЕТ

С помощью CSS3, в динамической части, вы можете добавить clear float к последнему элементу: 

#wrap [class*='my-div-class']:last-of-type {
  display: block;
  clear: both;
}

Где ваши дивы: 

<div id="wrap">
<?php for( $i = 0; $i < 3; $i++ ) {
   <div class="my-div-class-<?php echo $i ?>>
      <p>content</p>
   </div> <!-- .my-div-class-<?php echo $i ?> -->
}
</div>

Справка:

1 голос
/ 17 июля 2013

HTML 

<div id="wrapper">
    <div id="nav"></div>
    <div id="content"></div>      
    <div class="clearFloat"></div>
</div>

CSS 

.clearFloat {
    font-size: 0px;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 0px;
}
1 голос
/ 02 мая 2011

Вместо использования overflow:hidden, что является своего рода хаком, почему бы просто не установить фиксированную высоту, например height:500px, в родительское подразделение?

Страница:
...