it-swarm.com.de

Wie macht man ein Div, um zwei Float Divs darin zu wickeln?

Ich weiß nicht, ob es ein häufiges Problem ist, aber ich kann die Lösung noch nicht im Web finden. Ich möchte, dass zwei Divs in einem anderen Div gewickelt werden, aber diese beiden Divs müssen auf der gleichen Ebene ausgerichtet sein (Beispiel: Links nimmt man 20% der Breite des WrappedDiv ein, rechts nimmt man weitere 80%). Um diesen Zweck zu erreichen, habe ich das folgende CSS-Beispiel verwendet. Jetzt hat der Wrap DIV jedoch nicht alle Divs gewickelt. Die Wrap Div hat eine geringe Höhe als die beiden darin enthaltenen Divs. Wie kann ich sicherstellen, dass der 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>
72
WilliamLou

Es ist ein häufiges Problem, wenn Sie zwei Floats in einem Block haben. Der beste Weg, das Problem zu beheben, ist die Verwendung von clear:both nach dem zweiten div.

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

Es sollte den Behälter zwingen, die richtige Höhe zu haben.

72
Meep3D

Abgesehen von der clear: both Hack, Sie können das zusätzliche Element überspringen und overflow: hidden auf der Verpackung div:

<div style="overflow: hidden;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>
117
Mikael S

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

Eine andere Option ist die Verwendung von :after Trick:

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

Dies sollte es tun:

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

Alles schweben lassen.

Wenn Sie ein div in einem nicht schwebenden div 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 deine <div>s.

4
Alex Lane

Mit diesem CSS-Hack habe ich viel Zeit und Mühe gespart.

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

Ich benutze es in jedem Projekt.

3
Satish Gandham

Hier zeige ich dir einen Ausschnitt, in dem dein Problem gelöst ist (ich weiß, es ist zu lange her, seit du es gepostet hast, aber ich denke, das ist sauberer als de "clear" fix)

#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

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 für Halter, die innere Elemente mit absoluten Positionen enthalten. Und es wird ein Problem für das Layout mit fester Breite schaffen. Aber für responsives Design ist es einfach exzellent. :)

ZUSATZ ZU Meep3D's ANSWER

Mit CSS3 können Sie in einem dynamischen Bereich dem letzten Element einen eindeutigen 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>

Hinweis:

2
Mayeenul Islam

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
Sebachenko

Anstelle von overflow:hidden, was eine Art Hack ist, warum nicht einfach eine feste Höhe einstellen, z. height:500px, zur übergeordneten Abteilung?

1
Mori
<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 Rahmen oder Ränder verwenden, müssen Sie möglicherweise die Breite des Div reduzieren, in dem sie verwendet werden.

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

1
lepe