我想把两个<div>放在一起。右边<div>大约是200px;而左边<div>必须填满剩下的屏幕宽度?我该怎么做呢?
当前回答
我混合使用float和overflow-x:hidden。最少的代码，总是有效的。
https://jsfiddle.net/9934sc4d/4/ -加上你不需要清除你的浮动!
.left-half{
width:200px;
float:left;
}
.right-half{
overflow-x:hidden;
}
其他回答
我今天遇到了这个问题。基于以上的解决方案，这对我来说是有效的:
<div style="width:100%;">
<div style="float:left;">Content left div</div>
<div style="float:right;">Content right div</div>
</div>
简单地让父div跨越全宽度和浮动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>
我遇到了同样的问题，Mohits版本的工作。如果你想在html中保持你的左右顺序，试试这个。在我的例子中，左边的div正在调整大小，右边的div保持宽度260px。
HTML
<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>
CSS
.box {
height: 200px;
padding-right: 260px;
}
.box .left {
float: left;
height: 200px;
width: 100%;
}
.box .right {
height: 200px;
width: 260px;
margin-right: -260px;
}
诀窍是在主框上使用右填充，但通过再次使用右边距放置右框来再次使用该空间。
div1 {
float: right;
}
div2 {
float: left;
}
只要你为分隔这两个列块的元素设置clear:这就可以正常工作。
我不知道这是否是当前的问题，但我刚刚遇到了同样的问题，并使用CSS显示:内联块;标签。 将它们包装在div中，以便它们可以适当地放置。
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
请注意，inline style属性的使用只是为了简化这个示例，当然这些属性会被移动到外部CSS文件中。
