css - 将列表项环绕div内容

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

我的列表项创建了一个网格，但我想将徽标居中放置在网格中，并自动将列表项环绕在网格上。

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

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

我怎么解决这个问题。

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

最佳答案

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

关于css - 将列表项环绕div内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22576089/