it-swarm.com.de

Wie man einen Div in der Höhe wachsen lässt, während man drinnen schwimmt

Wie kann ich einen Div wachsen lassen, wenn er darin schwimmt? Ich weiß, dass das Definieren eines Wertes für die Breite und das Festlegen des Überlaufs auf ausgeblendete Werke. Das Problem ist, dass ich ein div mit dem sichtbaren Überlauf brauche. Irgendwelche Ideen?

116
pedrozath

overflow:auto; auf dem enthaltenden div macht alles in ihm sichtbar (auch schwebende Gegenstände) und das äußere div umschließt sie vollständig. Siehe dieses Beispiel:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}
<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>
267
JakeParis

Es gibt mehr als einen Weg, um Schwimmer zu beseitigen. Sie können einige hier überprüfen:
http://work.arounds.org/issue/3/clearing-floats/

Z.B., clear:both könnte für Sie arbeiten

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }
14
Nikita Rybak

In vielen Fällen, overflow: auto; wird ausreichen, aber zur Vervollständigung und Unterstützung für mehrere Browser schauen Sie sich Clearfix an, das die Aufgabe für alle Browser erledigt.

Betrachten wir das folgende Markup.

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Zusammen mit den folgenden Stilen ..

.content { float:left; }

.clearfix { ..from link.. }

Ohne das Clearfix hätte das übergeordnete div keine Höhe, da es sich um schwebende untergeordnete Elemente handelt. Der Clearfix bewirkt, dass die Eltern die schwebenden Kinder berücksichtigen.

11
miphe

Ich dachte mir, dass eine großartige Möglichkeit darin besteht, display: table auf der div.

7
pedrozath