我想把两个<div>放在一起。右边<div>大约是200px;而左边<div>必须填满剩下的屏幕宽度?我该怎么做呢?
当前回答
我的一个网站做了类似的事情:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>
其他回答
@roe和@MohitNanda所建议的方法是有效的，但是如果正确的div被设置为float:right;，那么它必须在HTML源代码中首先出现。这打破了从左到右的读取顺序，如果页面显示时关闭了样式，可能会导致混乱。如果是这样的话，使用包装器div和绝对定位可能会更好:
<div id="wrap" style="position:relative;">
<div id="left" style="margin-right:201px;border:1px solid red;">left</div>
<div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>
证明:
left right编辑:嗯，有意思。预览窗口显示了正确格式化的div，但呈现的post项没有。对不起，那你自己试试吧。
只要使用z指数，一切都会很好。确保将位置标记为固定或绝对。然后没有东西会像浮动标签一样移动。
我混合使用float和overflow-x:hidden。最少的代码，总是有效的。
https://jsfiddle.net/9934sc4d/4/ -加上你不需要清除你的浮动!
.left-half{
width:200px;
float:left;
}
.right-half{
overflow-x:hidden;
}
我的一个网站做了类似的事情:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>
正如大家所指出的，你可以通过设置float:right;RHS含量为负，LHS为负。
然而. .如果你不使用浮点数:left;在LHS上(如Mohit所做的那样)，那么你会得到一个步进效果，因为LHS div仍然会在布局中消耗边缘空间。
然而. .LHS浮动将收缩内容，所以如果这是不可接受的，你将需要插入一个定义宽度的子节点，在这一点上，你也可以在父节点上定义宽度。
然而. .正如David指出的那样，你可以改变标记的读取顺序来避免LHS浮点要求，但这有可读性和可能的可访问性问题。
然而. .这个问题可以用浮动来解决，并提供一些额外的标记
(警告:我不赞成在那个例子中使用.clearing div，详情请看这里)
综合考虑，我想我们大多数人都希望有一个非贪婪宽度:留在CSS3中……
