Come creare un "wrappanel" in html?

Question

Sono molto abituato a lavorare in WPF, ma di recente ho iniziato a creare siti Web in html.

Vorrei fare un elenco di cose (diciamo, ognuna contenente un'immagine e una descrizione) in html che si comportano come se fossero in un wrappanel WPF.

penso che ho quasi capito bene, in questo modo:

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

e l'impostazione del CSS in questo modo:

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

Così sono state impostate le voci di galleggiare a sinistra e questo funziona bene . Ma vorrei anche che l'intera lista avesse uno sfondo grigio uniforme. Al momento, mostra solo parzialmente lo sfondo grigio. Vorrei che la lista si allungasse in modo che circonda i suoi oggetti, suppongo? In altre parole, poiché il genitore ha uno sfondo grigio, voglio che i suoi figli siano "in cima" a quello sfondo grigio. Come faccio a fare questo?

TIA.

Answer 1

i float possono rovinare i layout in modo da utilizzare la visualizzazione: blocco inline.

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