Jak zrobić "wrappanel" w html?

Question

Jestem bardzo przyzwyczajony do pracy w WPF, ale ostatnio zacząłem budować strony internetowe w html.

Chciałbym sporządzić listę rzeczy (powiedzmy, każda zawierająca pic i opis) w html, które zachowują się tak, jakby były w wrapanelu WPF.

myślę, że prawie miał rację, robiąc to:

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

i ustawienie css tak:

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

Więc elementy zostały ustawione unosić się w lewo i to działa prawidłowo . Ale chciałbym również, aby cała lista miała solidne szare tło. W tej chwili tylko częściowo pokazuje szare tło. Chciałbym, żeby lista się rozciągała, tak, że otacza jej przedmioty, jak sądzę? Innymi słowy, ponieważ macierzysty ul ma szare tło, chcę, aby jego dzieci były "na wierzchu" tego szarego tła. Jak mam to zrobic?

TIA.

Answer 1

Spławiki mogą zepsuć układy, więc użyj wyświetlacza: wbudowany blok.

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