1、浮动布局

 

　　左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。

 

　　<divclass="one"></div>

 

　　<divclass="two"></div>

 

　　.one{

 

　　float:left;

 

　　width:200px;

 

　　height:200px;

 

　　background:darkcyan

 

　　}

 

　　.two{

 

　　margin-left:200px;

 

　　height:200px;

 

　　background:salmon

 

　　}

 

　　右侧固定宽度，左侧自适应则是同理，只要将固定栏右浮动，使用margin-right空出其宽度即可。

 

　　<divclass="one"></div>

 

　　<divclass="two"></div>

 

　　.one{

 

　　float:right;

 

　　width:200px;

 

　　height:200px;

 

　　background:darkcyan

 

　　}

 

　　.two{

 

　　margin-right:200px;

 

　　height:200px;

 

　　background:salmon

 

　　}

 

　　2、浮动布局+负外边距（双飞翼布局的两栏版）

 

　　<divclass="aside"></div>

 

　　<divclass="main">

 

　　<divclass="content"></div>

 

　　</div>

 

　　

 

　　.aside{

 

　　width:300px;

 

　　height:100px;

 

　　background:darkcyan;

 

　　margin-right:-100%;

 

　　float:left;

 

　　}

 

　　.main{

 

　　width:100%;

 

　　float:left;

 

　　}

 

　　.content{

 

　　margin-left:300px;

 

　　background:salmon;

 

　　}

 

　　3、绝对定位

 

　　<divclass="left"></div>

 

　　<divclass="right"></div>

 

　　.left{

 

　　width:200px;

 

　　height:200px;

 

　　position:absolute;

 

　　background:darkcyan

 

　　}

 

　　.right{

 

　　height:200px;

 

　　margin-left:200px;

 

　　background:salmon;

 

　　}







本文转载自中文网