如何在html中製作「wrappanel」？

Question

我很習慣在WPF中工作，但我最近開始在html中構建網站。

我想列舉一些事情（比方說，每個包含一個圖片和一個描述）在HTML中的表現就好像他們在WPF wrappanel。

我覺得我幾乎得到它的權利，這樣做：

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

和設置這樣的CSS：

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

所以，該項目已被設置爲左浮動，並能正常工作。但我也希望整個列表具有堅實的灰色背景。此刻，它僅部分顯示灰色背景。我想讓列表伸展一下，以便圍繞它的項目，我想？換句話說，因爲父母ul有灰色背景，所以我希望它的孩子能夠在這個灰色背景的「頂部」。我該怎麼做呢？

TIA。

Answer 1

浮動可以搞亂佈局，所以使用display：inline-block代替。

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