Question

我想在div项目（蓝色框）周围包装列表项。

我的列表项创建一个网格，但我想将我的徽标放入网格中，并自动将列表项包围在其中。

因此，列表项将自动显示在我的徽标的上方和下方。

每个列表项的宽度为：100px，高度为100px，蓝色框的宽度为：300px，高度为：300px。

我该如何解决这个问题。

http://i.stack.imgur.com/NcxEU.jpg

Answer 1

使用display和float您可以执行此操作（基本包含5个元素）：http://codepen.io/anon/pen/dybFG/

ul {width:500px;}
ul, li, a, img {display:block;
padding:0;
margin:0 auto;}
a  {
  width:100px;
  height:100px;
  margin:auto;
background:gray;
text-align:center;
  line-height:100px;}
li:nth-child(2) {
  float:left;
}
li:nth-child(3) {
  float:right;
}
li:nth-child(2) ,
li:nth-child(3) 
{
  line-height:300px;
}
li:nth-child(2) a,
li:nth-child(3) a
{
  display:inline-block;
  vertical-align:middle;
}

<ul>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><img src="http://lorempixel.com/300/300"/></li>
  <li><a href="#">link</a></li>
</ul>

16个链接和一个图片：http://codepen.io/anon/pen/oeaqs/ 如果不支持nth-child，请在HTML中使用class

包装列表项目围绕div内容

1 个答案: