Làm thế nào để tạo một "wrappanel" trong html?

Question

Tôi rất quen với việc làm việc trong WPF, nhưng gần đây tôi đã bắt đầu xây dựng trang web bằng html.

Tôi muốn tạo danh sách các thứ (giả sử, mỗi trang chứa một pic và mô tả) trong html hoạt động như thể chúng nằm trong một wrappanel WPF.

Tôi nghĩ rằng tôi gần như đã làm đúng, bằng cách làm này:

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

Và thiết lập các css như thế này:

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

Vì vậy, các mục đã được thiết lập để float trái và điều này hoạt động tốt . Nhưng tôi cũng muốn toàn bộ danh sách có nền màu xám chắc chắn. Hiện tại, nó chỉ hiển thị một phần màu xám. Tôi muốn danh sách căng ra để bao quanh các món đồ của nó, tôi cho là vậy? Nói cách khác, bởi vì cha mẹ ul có một nền màu xám, tôi muốn con cái của nó được "trên đầu trang" của nền màu xám đó. Làm thế nào để tôi làm điều này?

TIA.

Answer 1

phao nổi có thể làm lộn xộn bố cục để sử dụng hiển thị: inline-block thay thế.

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