如何将列表 ul 设置为正方形

【问题标题】：How to style a list ul to be a square如何将列表 ul 设置为正方形
【发布时间】：2015-04-01 07:47:18
【问题描述】：

我有这个 ul

 <ul>
<li>image</li>
<li>image</li>
<li>image</li>
</ul>

有谁知道如何将这个 ul 设置为这样的 suare？ http://i.stack.imgur.com/7MQJi.jpg

【问题讨论】：

你有一些 css 来展示你尝试了什么吗？ javascript中也有一些库可以得到这个，比如masonry jquery

标签： css html coding-style

【解决方案1】：

这个怎么样

ul{
    width:300px;
    list-style:none;
}
ul li:nth-child(1){
    height:210px;
}
ul li{
    float:left;
    display:inline-block;
    width:100px;
    background:orange;
    height:100px;
    margin:5px;
}

<ul>
<li>image</li>
<li>image</li>
<li>image</li>
</ul>

【讨论】：

【解决方案2】：

你可以这样做

*{box-sizing: border-box}
ul{
  width: 480px;
  height: 400px
}
ul li{
  width: 50%;
  float: left;
  list-style: none
}
ul li{
  height: 50%;
}
ul li:first-child{
  height: 100%;
  background: green
}
ul li:nth-child(2){
  background: red
}
ul li:last-child{
  background: yellow
}

<ul>
  <li>image</li>
  <li>image</li>
  <li>image</li>
</ul>

【讨论】：