¿Cómo hacer un "wrappanel" en html?

Question

Estoy muy acostumbrado a trabajar en WPF, pero recientemente comencé a crear sitios web en html.

Me gustaría hacer una lista de cosas (digamos, cada una con una imagen y una descripción) en html que se comporten como si estuvieran en un wrappanel de WPF.

creo que casi me hizo bien, al hacer esto:

<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> 

y ajuste de la CSS como esto:

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

para que los elementos se han establecido a flotar a la izquierda y esto funciona bien . Pero también me gustaría que toda la lista tenga un fondo gris sólido. Por el momento, solo muestra el fondo gris parcialmente. Me gustaría que la lista se estire para que rodee sus elementos, supongo. En otras palabras, como el padre ul tiene un fondo gris, quiero que sus hijos estén "encima" de ese fondo gris. ¿Cómo hago esto?

TIA.

Answer 1

flotadores pueden ensuciar los diseños así que use display: inline-block en su lugar.

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