Я очень привык работать в WPF, но недавно я начал создавать веб-сайты в html.
Я хотел бы сделать список вещей (скажем, каждый из которых содержит рис и описание) в html, которые ведут себя так, как если бы они находились в оболочке WPF.
Я думаю, что я почти понял это, сделав это:
<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 имеет серый фон, я хочу, чтобы его дети были "сверху" этого серого фона. Как это сделать?
ТИА.