Как сделать «обертку» в html? - PullRequest
Новая
       17

Как сделать «обертку» в html?

15 голосов
/ 15 ноября 2010

Я очень привык работать в 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 имеет серый фон, я хочу, чтобы его дочерние элементы были «сверху» этого серого фона. Как мне это сделать?

ТИА.

1 Ответ

14 голосов
/ 15 ноября 2010

float может испортить макеты, поэтому используйте display: inline-block. 

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