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,一切都会很好。 确保将位置标记为固定或绝对。 那么没有什么会像浮标一样移动。