як зробити div для загортання двох плаваючих divs всередину?

76

Я не знаю, чи це поширена проблема, але поки що я не можу знайти рішення в Інтернеті. Я хотів би, щоб два div, обернуті всередині іншого div, однак ці два div всередині повинні бути вирівняні за однаковим рівнем (наприклад: лівий бере 20% ширини wrappedDiv, правий бере інший 80%). Для досягнення цієї мети я використав наступний приклад CSS. Однак зараз обгортання DIV не обернуло всі ці divs. Обгортка 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>
css  layout  html  css-float 
— ВільямЛу
джерело

Відповіді:

73

Це поширена проблема, коли у вас є два поплавці всередині блоку. Найкращий спосіб її виправлення - використовувати clear:bothпісля другого div.

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

Це повинно змусити контейнер правильної висоти.

— Meep3D
джерело
43
Div вже є блочним елементом, тому ви можете видалити його зі свого стилю.
— mbillard
120

Окрім clear: bothзлому, ви можете пропустити додатковий елемент і використовувати overflow: hiddenна обгортці div:

<div style="overflow: hidden;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>
— Мікаель С
джерело
7
Мені подобається переповнення: найкраще прихований підхід.
— Кирило Гупта
9
Я дуже рада, що хтось поставив це тут ... це зводить мене з розуму, коли люди додають елемент просто для того, щоб очистити поплавки, коли це просто проблема css.
— tybro0103
1
Він працює з переповненням: auto; до. Я думаю, що це хак з переповненням більш елегантного "рубати", а потім div clear :)
— Alex Dn
4
У цього є деякі недоліки, на цьому веб-сайті також рекомендується .container { word-wrap: break-word; }і .container img { max-width: 100%; height: auto; }робити так, щоб великий контент поводився добре.
— Кос
Здається, це не працює для мого елемента body, в якому у мене є два плаваючі div. Тіло не приймає розміру внутрішніх елементів навіть при переповненні: приховане. Я завжди використовував такий підхід, не маючи уявлення, чому це не працює, допоможіть!
— A. Sallai
8

Це має зробити це:

<div id="wrap">
  <div id="nav"></div>
  <div id="content"></div>
  <div style="clear:both"></div>
</div>
— Джерджер
джерело
8

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; }
— Томас Дж. Бредлі
джерело
4

Поплив все.

Якщо у вас є плаваючий 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>.

— Алекс Лейн
джерело
2

Ось ще один, який я знайшов корисним. Це працює навіть для адаптивного дизайну 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, в динамічній частині, ви можете додати чітке плавання до останнього елемента, виконавши:

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

Де знаходяться ваші divs:

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

Довідково:

— Майєнул Іслам
джерело
2

Тут я показую вам фрагмент, де вирішено вашу проблему (я знаю, що вже занадто давно ви не опублікували її, але я думаю, що це чистіше, ніж де "чітке" виправлення)

#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>
Розгорніть фрагмент

— Фернандо Карраскоса
джерело
1

Замість використання overflow:hidden, що є свого роду хаком, чому б просто не встановити фіксовану висоту, наприклад height:500px, батьківському поділу?

— Морі
джерело
1 
<html>
<head>
    <style>
        #main { border: 1px #000 solid; width: 600px; height: 400px; margin: auto;}
        #one { width: 20%; height: 100%; background-color: blue; display: inline-block; }
        #two { width: 80%; height: 100%; background-color: red; display: inline-block; }
    </style>
</head>
<body>
<div id="main">
    <span id="one">one</span><span id="two">two</span>
</div>
</body>
</html>

Секрет полягає в inline-block. Якщо ви використовуєте межі або поля, можливо, вам доведеться зменшити ширину div, який їх використовує.

ПРИМІТКА. Це не працює належним чином у IE6 / 7, якщо ви використовуєте "DIV" замість "SPAN". (див. http://www.quirksmode.org/css/display.html )

— лепе
джерело
1

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;
}
— Себаченко
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.