1.浮动布局,左边float:left;右边margin-left:左边宽度:
<div class="content"> <div class="left"> </div> <div class="right"> /*此处测试时可以写一长串文字,便可看出右边块的变化*/ </div> </div>
*{
margin: 0;
padding: 0;
}
.content{
background-color: gray;
}
.left{
float: left;
20%;
min-height: 100px;
background-color: green;
}
.right{
margin-left: 20%;
background-color: purple;
min-height: 100px;
}
2.浮动和负边距实现:
<div class="content"> <div class="left"> </div> <div class="right"> <div class="rightinner"> </div> </div> </div>
*{ margin: 0; padding: 0; min-height: 100px; } .left { background-color: green; float: left; 20%; margin-right: -100%; } .right { float: left; 100%; } .rightinner{ margin-left: 20%; background-color: purple; }
3.左右等高,使用一个外div包含左右div,再使用边宽与负边距决定:
<div class="container"> <div class="wrap"> <div class="left"> </div> <div class="right"> </div> </div> </div>
*{ margin: 0; padding: 0; min-height: 100px; } .container{ background-color: gray; } .wrap{ display:inline-block; border-left: 200px solid green; position: relative; } .left{ float: left; 200px; margin-left: -200px; position: relative; }
4.依旧是使用块包含通过边宽与负边距浮动设置:
<div class="container"> <div class="right"> </div> <div class="left"> </div> </div>
*{ margin: 0; padding: 0; min-height: 100px; } .container{ background-color: gray; overflow: hidden; padding-left: 200px; } .right{ background-color: purple; 100%; border-left: 200px solid purple; margin-left: -200px; float: right; } .left{ background-color: green; 200px; float: left; margin-left: -200px; }
5.使用两个包含快,相对位置浮动与左右偏移以及负边距:
<div class="container"> <div class="wrap"> <div class="left"> </div> <div class="right"> </div> </div> </div>
*{
margin: 0;
padding: 0;
min-height: 100px;
}
.container{
background-color: gray;
overflow: hidden;
position: relative;
100%;
float: left;
}
.wrap{
float: left;
100%;
position: relative;
left: 200px;
background-color: purple;
}
.right{
position: relative;
background-color: pink;
}
.left{
background-color: green;
200px;
float: left;
margin-left: -200px;
}
6.不等高
<div class="container"> <div class="wrap"> <div class="left"> </div> <div class="wrapinner"> <div class="right"> </div> </div> </div> </div>
*{ margin: 0; padding: 0; min-height: 100px; } .container{ background-color: gray; overflow: hidden; position: relative; 100%; float: left; } .wrap{ float: left; 100%; position: relative; left: 200px; background-color: purple; } .left{ background-color: green; 200px; float: left; margin-left: -200px; /*margin-right: -100%;*/ } .wrapinner{ float: left; margin-left: -200px; 100%; } .right{ margin-left: 200px; overflow: hidden; background-color: pink; }
以上几种方法经亲测,都没问题。总结一下:主要就是使用包含块使占宽之后再用负边距达到固定宽,浮动与定位结合使用,大致就这几种组合,可以根据具体实际情况灵活使用。