Tweet
hi
Weiss nicht genau wie ich das Problem beschreiben könnte.
Drum versuch ich es lieber zu illustrieren.
Habe einen <div>, mit Rahmen und Hintergrundfarbe. Darin befindet sich eine Liste (<ul>) mit Elementen (<li><img></li>). Die Elemente (<li>) haben float:left bekommen, damit sie nicht untereinander, sondern solange der Platz vorhanden ist, nebeneinander erscheinen.
Jetzt sollte der <div> entsprechend wachsen.
Leider tut er das nur, wenn die Elemente den float:left Wert nicht haben.
Aussehen tut das so:
Der HTML Code ist dieser:
CSS folgender:
Weiss nicht genau wie ich das Problem beschreiben könnte.
Drum versuch ich es lieber zu illustrieren.
Habe einen <div>, mit Rahmen und Hintergrundfarbe. Darin befindet sich eine Liste (<ul>) mit Elementen (<li><img></li>). Die Elemente (<li>) haben float:left bekommen, damit sie nicht untereinander, sondern solange der Platz vorhanden ist, nebeneinander erscheinen.
Jetzt sollte der <div> entsprechend wachsen.
Leider tut er das nur, wenn die Elemente den float:left Wert nicht haben.
Aussehen tut das so:
Der HTML Code ist dieser:
Code:
<div class='divliste'> <h3>Fotografien: </h3> <ul> <li><img src='../icons/1242029300.jpg'></li> <li><img src='../icons/1242029300.jpg'></li> <li><img src='../icons/1242029300.jpg'></li> <li><img src='../icons/1242082483.jpg'></li> <li><img src='../icons/1242029300.jpg'></li> <li><img src='../icons/1242029300.jpg'></li> <li><img src='../icons/1242029300.jpg'></li> <li><img src='../icons/1242084824.jpg'></li> </ul> </div>
Code:
.divliste{
background-color: #EEE;
border-color: #CCC;
border-width: 2px;
border-style: solid;
width: 100%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
}
.divliste h3{
margin: 0;
padding: 0;
margin-bottom: 10px;
}
.divliste h3 span a{
font-size: .7em;
margin-left: 10px;
position: relative;
top: -3px;
right: 0px;
text-decoration: none;
color: #777;
}
.divliste ul{
width: 500px;
margin: 0px;
padding: 0px;
}
.divliste ul li{
padding: 0;
margin: 0;
margin-right: 10px;
list-style: none;
float: left;
}
Kommentar