CSS两个div彼此相邻
我想把两个<div>放在一起。 正确的<div>是大约200px; 左边的<div>必须填满屏幕宽度的其余部分？ 我该怎么做？
您可以使用flexbox布置您的物品：
#parent { display: flex; } #narrow { width: 200px; background: lightblue; /* Just so it's visible */ } #wide { flex: 1; /* Grow to rest of container */ background: lightgreen; /* Just so it's visible */ }
<div id="parent"> <div id="wide">Wide (rest of width)</div> <div id="narrow">Narrow (200px)</div> </div>
我不知道这是否仍然是一个当前的问题，但我只是遇到了同样的问题，并使用CSS display: inline-block; 标签。 将这些包装在一个div中，以便它们可以被适当地定位。
<div> <div style="display: inline-block;">Content1</div> <div style="display: inline-block;">Content2</div> </div>
请注意，内联样式属性的使用仅用于本示例的简洁性，当然这些使用将被移至外部CSS文件。
不幸的是，这对于一般情况来说并不是一件微不足道的事情。 最简单的事情就是添加一个css风格的属性“float：right;” 到200px div，但是，这也会导致你的“main”-div实际上是全宽，并且其中的任何文本都会围绕200px-div的边缘浮动，这通常看起来很奇怪，取决于内容在所有情况下，除非是浮动图像）。
编辑：由Dombuild议，包装问题当然可以解决的余地。 我傻。
@roe和@MohitNandabuild议的方法工作，但是如果右边的div被设置为float:right; ，那么它必须首先在HTML源代码中。 这打破了从左到右的读取顺序，如果页面显示样式closures，这可能会造成混淆。 如果是这样的话，最好使用包装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>
certificate：
左右
编辑：嗯，有趣。 预览窗口显示格式正确的div，但渲染后的项目不显示。 对不起，你必须自己尝试一下。
我今天遇到了这个问题。 基于以上解决scheme，这对我工作：
<div style="width:100%;"> <div style="float:left;">Content left div</div> <div style="float:right;">Content right div</div> </div>
简单地让父div跨越整个宽度，并浮动其中包含的div。
div1 { float: right; } div2 { float: left; }
只要你设置clear: both这将工作正常clear: both分隔这两个列块的元素。
UPDATE
如果您需要将元素放在一行中，则可以使用“ Flex布局” 。 在这里你有另一个Flex教程 。 这是一个很棒的CSS工具，尽pipe它不是100％兼容，但是它的支持每天都会变得更好。 这工作如下简单：
HTML
<div class="container"> <div class="contentA"></div> <div class="contentB"></div> </div>
CSS
.container { display: flex; width: 100%; height: 200px; } .contentA { flex: 1; } .contentB { flex: 3; }
而你在这里得到的是一个总容量为4个单位的容器，与孩子的空间分成1/4和3/4的关系。
我在CodePen中做了一个解决你的问题的例子。 我希望它有帮助。
http://codepen.io/timbergus/pen/aOoQLR?editors=110
很古老
也许这只是一个废话，但你有没有尝试过一张桌子？ 它不直接使用CSS来定位div，但它工作正常。
你可以创build一个1×2表格，并把你的divs放在里面，然后用CSS格式化表格，把它们放到你想要的位置：
<table> <tr> <td> <div></div> </td> <td> <div></div> </td> </tr> </table>
注意
如果你想避免使用表，如前所述，你可以使用float: left; 和float: right; 并在下面的元素中，不要忘记添加一个clear: left; ， clear: right; 或clear: both; 以便清理位置。
我遇到了同样的问题和Mohits版本的作品。 如果你想在html中保留你的左右顺序，试试这个。 在我的情况下，左边的div是resize，正确的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; }
诀窍是在主盒子上使用正确的填充，但再次使用该空格，再次以右边距放置右边的盒子。
正如大家已经指出的那样，你可以通过设置float:right;做到这一点float:right; RHS的内容和LHS的负利差。
但是..如果你不使用float: left; 在LHS（就像Mohit所做的那样），那么你会得到一个阶梯效应，因为LHS div仍然会消耗布局中的边际空间。
但是，LHS浮动将收缩包装内容，所以如果不能接受的话，你需要插入一个定义宽度的子节点，这时你可能已经定义了父节点的宽度。
但是，正如David所指出的那样，您可以更改标记的读取顺序以避免LHS浮动要求，但这具有可读性和可能的可访问性问题。
但是..这个问题可以通过给予一些额外的标记浮动解决
（注意：在这个例子中，我不赞成.clear div，详情请看这里 ）
所有的事情考虑，我想大多数人希望有一个非贪婪的宽度：剩下的CSS3 …
这不是每个人的答案，因为IE7不支持，但你可以使用它，然后使用IE7的替代答案。 它是display：table，display：table-row和display：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; }
我使用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>
只需使用z-index，一切都会很好。 确保将位置标记为固定或绝对。 那么没有什么会像浮标一样移动。
