Wie erstelle ich ein Div, um zwei Float-Divs darin zu verpacken?

75

Ich weiß nicht, ob es sich um ein häufiges Problem handelt, aber ich kann die Lösung im Web bisher nicht finden. Ich möchte, dass zwei Divs in ein anderes Div eingewickelt werden, aber diese beiden Divs im Inneren müssen auf derselben Ebene ausgerichtet sein (zum Beispiel: links nimmt 20% Breite des wrappDiv, rechts nimmt weitere 80%). Um diesen Zweck zu erreichen, habe ich das folgende Beispiel-CSS verwendet. Jetzt hat der Wrap-DIV diese Divs jedoch nicht alle verpackt. Das Wrap Div hat eine geringe Höhe als die beiden darin enthaltenen Divs. Wie kann ich sicherstellen, dass die Wrap-Div die größte Höhe als die enthaltenen Divs hat? Vielen Dank!!!

<!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 WilliamLou
quelle

Antworten:

73

Es ist ein häufiges Problem, wenn Sie zwei Floats in einem Block haben. Der beste Weg, dies zu beheben, ist die Verwendung clear:bothnach der Sekunde div.

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

Der Behälter sollte die richtige Höhe haben.

Meep3D
quelle
43
Ein div ist bereits ein Blockelement, sodass Sie es aus Ihrem Stil entfernen können.
mbillard
120

Abgesehen vom clear: bothHack können Sie das zusätzliche Element überspringen und overflow: hiddenfür die Verpackung verwenden div:

<div style="overflow: hidden;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>
Mikael S.
quelle
7
Ich mag den Überlauf: versteckter Ansatz am besten.
Cyril Gupta
9
Ich bin so froh, dass jemand dies hier angelegt hat ... es macht mich verrückt, wenn Leute ein Element hinzufügen, nur um die Floats zu löschen, wenn es nur ein CSS-Problem ist.
tybro0103
1
Es funktioniert mit Überlauf: auto; zu. Ich denke, es ist Hack mit Überlauf eleganter "Hack" als div klar :)
Alex Dn
4
Dies hat einige Nachteile, die diese Seite auch empfiehlt .container { word-wrap: break-word; }und .container img { max-width: 100%; height: auto; }damit sich große Inhalte gut verhalten.
Kos
Dies scheint bei meinem Körperelement, in dem ich zwei schwebende Divs habe, nicht zu funktionieren. Der Körper nimmt auch bei Überlauf nicht die Größe der inneren Elemente ein: versteckt. Ich habe immer diesen Ansatz verwendet, keine Ahnung, warum es nicht funktioniert, bitte helfen Sie!
A. Sallai
8

Dies sollte es tun:

<div id="wrap">
  <div id="nav"></div>
  <div id="content"></div>
  <div style="clear:both"></div>
</div>
jerjer
quelle
8

overflow:hidden (wie von @Mikael S erwähnt) funktioniert nicht in jeder Situation, sollte aber in den meisten Situationen funktionieren.

Eine andere Möglichkeit ist, den :afterTrick zu verwenden:

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

Und für IE6:

.wrapper { height: 1px; }
Thomas J Bradley
quelle
4

Alles schweben lassen.

Wenn Sie ein Floated divin einem Non- divFloated haben, wird alles verrückt. Aus diesem Grund verwenden die meisten CSS-Frameworks wie Blueprint und 960.gs Floated Container und divs.

Um Ihre spezielle Frage zu beantworten,

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

sollte gut funktionieren, solange Sie float:left;alle Ihre <div>s.

Alex Lane
quelle
2

Hier ist eine andere, die ich hilfreich fand. Es funktioniert auch für Responsive CSS-Design.

#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 */
}

WARNUNG: Diese Theorie funktioniert jedoch nicht, wenn der Halter innere Elemente mit absoluten Positionen enthält. Und es wird ein Problem für das Layout mit fester Breite verursachen. Aber für responsives Design ist es einfach exzellent. :) :)

NEBEN Meep3D der ANTWORT

Mit CSS3 können Sie in einem dynamischen Teil dem letzten Element einen klaren Gleitkommawert hinzufügen, indem Sie:

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

Wo deine Divs sind:

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

Referenz:

Mayeenul Islam
quelle
2

Hier zeige ich Ihnen einen Ausschnitt, in dem Ihr Problem gelöst ist (ich weiß, es ist zu lange her, seit Sie es veröffentlicht haben, aber ich denke, dies ist sauberer als die "klare" Lösung).

#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>
Erweitern Sie das Snippet

Fernando Carrascosa
quelle
1

Anstatt zu verwenden overflow:hidden, was eine Art Hack ist, warum nicht einfach eine feste Höhe festlegen, z. B. height:500pxfür die übergeordnete Abteilung?

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

Das Geheimnis ist das inline-block. Wenn Sie Ränder oder Ränder verwenden, müssen Sie möglicherweise die Breite des Divs reduzieren, das diese verwendet.

HINWEIS: Dies funktioniert in IE6 / 7 nicht ordnungsgemäß, wenn Sie "DIV" anstelle von "SPAN" verwenden. (sehen http://www.quirksmode.org/css/display.html )

Lepe
quelle
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;
}
Sebachenko
quelle