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

Question

我有这个ul

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

有谁知道怎么把这个ul给这样的suss？ http://i.stack.imgur.com/7MQJi.jpg

Answer 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>

Answer 2

你可以这样做

＆＃13;

＆＃13;

*{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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;