我非常习惯使用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.