Wie wird ein div vertikal erweitert, um den Inhalt darin zu verpacken?

Question

Ich habe ein Div, das eine Reihe von Bildern umschließt, die dynamisch generiert werden. Ich weiß nicht, wie hoch die Liste der Bilder ist. Mein Problem ist, dass das div, das die dynamisch erzeugten Bilder enthält, sich nicht so verhält, als würde es irgendeinen Inhalt enthalten - ich möchte, dass es sich bis zur Höhe der Liste der Bilder erstreckt. Jedes Bild ist selbst in ein div gehüllt.

Dies ist der Wrapper div:

.block { padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; } 

Dies ist das Markup dynamisch generiert für (einen) die Bilder:

<div class="block"> 
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="45.jpg" BORDER="0"/></div> 
..... 

Wie erhalte ich die block div mit der verlängern unten Bilder?

Dank

Answer 1

Das Problem, das Sie beobachten, passiert, wenn Sie ein Element schweben, das es aus dem normalen Fluss der Elemente herausnimmt (bei normalem Fluss meine ich die Art, wie die Elemente ohne Styling erscheinen würden). Wenn Sie ein Element schweben lassen, werden die anderen Elemente, die sich noch im normalen Fluss befinden, einfach ignoriert und machen keinen Platz dafür. Deshalb dehnt Ihr block div nicht die gesamte Höhe Ihres Bildes aus.

Es gibt ein paar verschiedene Lösungen:

1) In der Regel overflow: hidden; zum block Klasse:

.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; } 

2) ein Element nach dem Bild hinzufügen, dass das Floating löscht:

<div class="block"> 
    <div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div> 
    <div style="clear: both;"></div> 
</div> 

Beide werden funktionieren, aber ich bevorzuge die erste Lösung.

Answer 2

Ich habe einen div-Tag, das abhängig (horizontal und vertikal) erweitert, was ich in ihm. Ich habe:

<table style="margin-left:1em; border:2px solid #000000; background-color:#f2f2f2; padding:1px; float:center; clear:right; font-size:85%;"> 

Answer 3

Fügen Sie diese in Ihrem CSS-Datei:

.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;} 
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */ 

und fügen Sie den "group"

<div id="summary" style="float:right;margin:5px 5px 0;" ALIGN="right"> 

ich auch eine Tabelle in ihm legte meine Informationen alle halten Klasse zu Ihrem block Div, so dass der Schwimmer gelöscht wird:

Answer 4

REMOVE float:left von Bildstil und height:Auto von Block Stil

ADD display:inline-block; im Block-Stil (Container-Stil)