Wie erstellt man ein "Wrappanel" in HTML?

Question

Ich bin sehr daran gewöhnt, in WPF zu arbeiten, aber ich habe vor kurzem begonnen, Websites in HTML zu erstellen.

Ich möchte eine Liste von Dingen (sagen wir einmal, jedes mit einem Bild und einer Beschreibung) in HTML, die sich so verhalten, als ob sie in einem WPF Wrapper sind.

Ich glaube, ich habe es fast richtig, indem Sie dies tun:

<ul id="listofthings"> 
<li> 
    <div class="card"> 
    <div class="image" id="pic1"> 
     </div> 
     <div class="description"> 
     <h2><a href="">Dog</a></h2> 
     <p>The dog is a domesticated form of the gray wolf, a member of the Canidae family.</p> 
     <a href="">Read more.</a> 
     </div> 
    </div> 
</li> 
<li> 
    <div class="card"> 
    <div class="image" id="pic1"> 
     </div> 
     <div class="description"> 
     <h2><a href="">Cat</a></h2> 
     <p>The cat, also known as the domestic cat or housecat, is a small furry domesticated carnivorous mammal.</p> 
     <a href="">Read more.</a> 
     </div> 
    </div> 
</li> 

<!--...etc. etc.--> 

</ul> 

Und die CSS wie diese Einstellung:

#listofthings{ 
background-color:gray; 
list-style-type:none; 
} 


#listofthings li{ 
width: 300px; 
float: left; 
} 

.picture{ 
background-repeat: no-repeat; 
width: 80px; 
height: 80px; 
position: absolute; 
} 

.description{ 
position: relative; 
top: 0; 
margin-left: 80px; 
padding-bottom: 2em; 
} 

So sind die Elemente eingestellt wurden links zu schweben und das funktioniert gut . Aber ich möchte auch, dass die gesamte Liste einen festen grauen Hintergrund hat. Im Moment zeigt es nur teilweise den grauen Hintergrund. Ich möchte, dass sich die Liste so weit ausdehnt, dass sie ihre Gegenstände umgibt. Mit anderen Worten, weil die Eltern-URL einen grauen Hintergrund hat, möchte ich, dass ihre Kinder "oben" auf diesem grauen Hintergrund sind. Wie mache ich das?

TIA.

Answer 1

Floats können Layouts durcheinander bringen, also verwenden Sie stattdessen display: inline-block.

#listofthings li{ 
width: 300px; 
display: inline-block; 
}