标签:
(1)右边自适应,左边固定宽度。
实现点:float:left;width:100%; 顺序(有float的要先渲染);
<div style="border:1px solid black;clear:both;"> <div id="right" style="width:20px;float:right;border:1px solid blue;">右边</div> <div id="left" style="width:100%;border:1px solid red;">左边<div> <div>
注意:float的div是写在前的,如果写在自动填充的div后面,则效果没有。
(2)两边固定宽度,中间自适应
<div id="main" style="width:100%;"> <div id="left" style="float:left;width:200px;border:1px solid red;height:100px;background-color:red;">左边</div> <div id="right" style="float:right;width:200px;border:1px solid red;height:100px;;background-color:red;">右边</div> <div id="center" style="height:100px;border:1px solid blue;width:auto;margin-left:200px;margin-right:200px;background-color:green;">中间</div> </div>
2、类表格方式:
<div style="width:100%;display:table;"> <div style="width:200px;border:1px solid red;height:100px;background-color:red;display:table-cell;"></div> <div style="height:100px;border:1px solid blue;width:auto;;background-color:green;display:table-cell;"></div> <div style="width:200px;border:1px solid red;height:100px;;background-color:red;display:table-cell;"></div> </div>
内部div自动扩张剩余宽度(包含固定宽度div和自适应宽度div)
标签:
原文地址:http://www.cnblogs.com/lizhenli/p/4757316.html