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; width: 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; width: 20%; margin-right: -100%; } .right { float: left; width: 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; width: 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; width: 100%; border-left: 200px solid purple; margin-left: -200px; float: right; } .left{ background-color: green; width: 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; width: 100%; float: left; } .wrap{ float: left; width: 100%; position: relative; left: 200px; background-color: purple; } .right{ position: relative; background-color: pink; } .left{ background-color: green; width: 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; width: 100%; float: left; } .wrap{ float: left; width: 100%; position: relative; left: 200px; background-color: purple; } .left{ background-color: green; width: 200px; float: left; margin-left: -200px; /*margin-right: -100%;*/ } .wrapinner{ float: left; margin-left: -200px; width: 100%; } .right{ margin-left: 200px; overflow: hidden; background-color: pink; }
以上几种方法经亲测,都没问题。总结一下:主要就是使用包含块使占宽之后再用负边距达到固定宽,浮动与定位结合使用,大致就这几种组合,可以根据具体实际情况灵活使用。