#outer
{
background-color:Gray;
margin:10px auto;
min-width:700px;
max-width:900px;
width:expression(document.body.clientWidth < 700? "780px" : document.body.clientWidth > 900? "900px" : "auto");
}
#leftf {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 20%;
}
#rightf {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
float: left;
height: 300px;
width: 70%;
}
<div id="outer">
<div id="left"></div>
<div id="right"></div>
</div>
我是想把左边div固定宽度 那么右边的div宽度该怎么算
不用这么写
#rightf
{
height: 300px;
padding-left: 20%;
}
这样就可以空出左边的空间了,是标准的左右两列布局
#outer{
width:100%;
float:right;
margin-left:-250px;
height:100%;
}
#leftf {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 100%;
width: 250px;
}
#rightf {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
margin:0 0 0 266px;
border:1px solid black;
height:100%;
}
<div id="outer">
<div id="leftf"></div>
<div id="rightf"></div>
</div>