<ul>
<li></li>
<li></li>
<li></li>
</ul>
等分布局的方法:
例如:
1、弹性盒子
*{
margin: 0;
padding: 0;
}
ul{
width: 100%;
height: 200px;
background: #ccc;
display: flex;
display: -webkit-flex;
flex-flow: row nowrap;
justify-content: space-between;
}
ul li{
list-style: none;
}
ul li:nth-of-type(2){
height: 100%;
background: yellow;
width: calc(100% - 400px);
}
ul li:nth-of-type(odd){
background: red;
width: 200px;
height: 200px;
}
2、浮动
*{
margin: 0;
padding: 0;
}
ul li{
height: 200px;
list-style: none;
}
ul li:nth-of-type(1){
float: left;
width: 200px;
background: red;
}
ul li:nth-of-type(2){
background: yellow;
float: right;
width: 200px;
}
ul li:last-of-type{
background: green;
float: none;
}
3、定位
*{
margin: 0;
padding: 0;
}
ul{
width: 100%;
position: relative;
}
ul li{
list-style: none;
}
ul li:nth-of-type(1){
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
background: red;
}
ul li:nth-of-type(2){
top: 0;
height: 200px;
background: green;
}
ul li:last-of-type{
position: absolute;
width: 200px;
height: 200px;
right: 0;
top: 0;
background: yellow;
}