当前位置：首页 → 问答吧 → 请教一个DIV排版问题

请教一个DIV排版问题

时间：2011-06-22

来源：互联网

</style>
#Div_Buttom {
height: 700px;
}
#Div_BL {
width: 200px;
float: left;
height: 100%;
}

#Div_Splitter {
width: 10px;
float: left;
height: 100%;
}
#Div_BR {
float: left;
width: 100%; =>这里100%的目的是想让Div_BR占满右边空白的部分,结果它在下一行显示,要怎么做才对?
}
</style>

<body>
<div id="Div_Buttom">
<div id="Div_BL"> Div_BL</div> =>宽200px
<div id="Div_Splitter"> S</div> =>宽10px
<div id="Div_BR"> Div_BR</div> =>占满余一的空间
</div>
</body>

作者: siaosa 发布时间: 2011-06-22

浮动的原理是
父元素宽> 子元素1宽+子元素2宽+子元素3宽
这样他们才能显示在一排
如果子元素加起来所有的宽大于父元素的宽，一些子元素会跳到下一排，以满足父元素上面的公式的要求

你这个写法就不对，要不全用因定的像素宽度表示宽，要不全用百分比，不然受分辨率的影响肯定会出问题

作者: aspwebchh 发布时间: 2011-06-22

我就想左边的固定宽度, 右边的自动占满余下的空间

作者: siaosa 发布时间: 2011-06-22

引用 2 楼 siaosa 的回复:

我就想左边的固定宽度, 右边的自动占满余下的空间

要不父元素设计固定宽度，这样倒还可以
如果父素不用固定
除非用js控制，用css做不的了，包括各种电脑上不同的分辨率，窗口的最大化之类的都要计算在内

作者: aspwebchh 发布时间: 2011-06-22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title> new document </title>
<style>
#Div_Buttom {
height: 700px;
}
#Div_BL {
width: 200px;
float: left;
height: 100%;
background-color:#f00;
}

#Div_Splitter {
width: 10px;
float: left;
height: 100%;
background-color:#ff0;
margin-right:-210px;
}
#Div_BR {
background-color:#336600;
}
</style>
</head>

<body>
<div id="Div_Buttom">
<div id="Div_BL"> Div_BL</div>
<div id="Div_Splitter"> S</div>
<div id="Div_BR"> Div_BR</div>
</div>
</body>
</html>

作者: hongmei85 发布时间: 2011-06-22

请教一个DIV排版问题

热门阅读

热门下载