我要两个<div>紧挨着。右边<div>大约200px；并且左侧<div>必须填满屏幕的其余宽度？我怎样才能做到这一点？
CSS两个div彼此相邻
第3874篇《CSS两个div彼此相邻》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共11个回答
只需使用z-index，一切都会很好。确保将位置标记为固定或绝对。那么什么都不会像float标签那样四处移动。
解释一下我的一个网站，它做了类似的事情：
<!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内容上设置a 和在LHS上设置负余量来实现。
但是..如果您不在float: left;LHS上使用a （如Mohit那样），则将获得步进效果，因为LHS div仍将占用布局中的空白空间。
但是，。LHS浮点数将收缩内容，因此，如果不可接受，则需要插入定义宽度的子节点，此时，您可能已经在父节点上定义了宽度。
但是，..正如David指出的那样，您可以更改标记的读取顺序以避免LHS浮动要求，但这存在可读性和可能的可访问性问题。
但是..可以通过给定一些附加标记的浮点数来解决此问题
（注意：在该示例中，我不赞成.clearing div，有关详细信息，请参见此处）
考虑到所有问题，我想我们大多数人都希望有一个非贪婪的宽度：留在CSS3中...
这并不是每个人的答案，因为IE7-不支持它，但是您可以使用它，然后对IE7-使用替代答案。显示为：table，显示为：table-row，显示为：table-cell。请注意，这不是使用表格进行布局，而是为div设置样式，以使事情顺利进行，从而消除了上面的所有麻烦。我的是html5应用程序，因此效果很好。
本文显示了一个示例：http : //www.sitepoint.com/table-based-layout-is-the-next-big-thing/
样式表如下所示：
.container {
display: table;
width:100%;
}
.left-column {
display: table-cell;
}
.right-column {
display: table-cell;
width: 200px;
}
我遇到了同样的问题，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;
}
诀窍是在主框上使用右填充，但通过将右框再次置于margin-right来再次使用该空间。
div1 {
float: right;
}
div2 {
float: left;
}
只要您clear: both为分隔这两个列块的元素设置，就可以正常工作。
@roe和@MohitNanda建议的方法有效，但是如果将正确的div设置为float:right;，则它必须首先出现在HTML源代码中。这会破坏从左到右的读取顺序，如果在关闭样式的情况下显示页面，可能会造成混乱。如果是这种情况，最好使用wrapper 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>
展示：
左右编辑：嗯，很有趣。预览窗口显示格式正确的div，但是呈现的帖子项目不显示。抱歉，您必须自己尝试一下。
我不知道这是否仍然是当前问题，但我只是遇到了同样的问题并使用了CSS display: inline-block;标签。将它们包装在div中，以便可以适当地放置它们。
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
请注意，使用内联样式属性仅是为了简洁起见，当然，这些示例已被移动到外部CSS文件中。
我今天遇到了这个问题。根据上述解决方案，这对我有用：
<div style="width:100%;">
<div style="float:left;">Content left div</div>
<div style="float:right;">Content right div</div>
</div>
只需使父div跨满整个宽度并浮动其中包含的div。
不幸的是，对于一般情况而言，这并不是一件容易的事。最简单的方法是添加css样式的属性“ float：right;”。到您的200像素div，但是，这也会导致您的“主” div实际为全角，并且其中的所有文本都会围绕200像素div的边缘浮动，这通常看起来很奇怪，具体取决于内容（在所有情况下，除非是浮动图片）。
编辑： 正如Dom所建议的，包装问题当然可以有一点解决。傻我
相似问题
问题类别
我混合使用float和overflow-x：hidden。最少的代码，始终有效。
https://jsfiddle.net/9934sc4d/4/-另外，您无需清除浮动信息！