如何在另一个div内水平放置两个div
我还没有玩CSS的时间太久，现在没有提及。 我的问题应该相当简单，但是使用Googlesearch并不能提供足够的答案。 所以，join集体的知识
|#header---------------------------------------------------------------| | TITLE | |#sub-title------------------------------------------------------------| |bread > crumb | username logout | |#sub-left | #sub-right| |---------------------------------|------------------------------------| 这就是我想要我的布局。 标题反正。 我希望子标题包含子左侧的子右侧。 我用什么css规则来确保div被另一个div的属性所约束。 在这种情况下，如何确保在子标题内留下子版权和子版权？
这是一个很常见的错误观念，你需要clear:both底部的div，当你真的不需要。 虽然狡猾的答案是正确的，你不需要那个非语义的，无用的清理div。 所有你需要做的就是坚持一个overflow:hidden在容器上：
#sub-title { overflow:hidden; }
当你浮动sub-left和sub-right他们不再占用sub-title内的任何空间。 您需要添加style = "clear: both"下的另一个div，以展开包含div或显示在其下方。
HTML：
<div id="sub-title"> <div id="sub-left"> sub-left </div> <div id="sub-right"> sub-right </div> <div class="clear-both"></div> </div>
CSS：
#sub-left { float: left; } #sub-right { float: right; } .clear-both { clear: both; }
这应该做你正在寻找的东西：
<html> <head> <style type="text/css"> #header { text-align: center; } #wrapper { margin:0 auto; width:600px; } #submain { margin:0 auto; width:600px; } #sub-left { float:left; width:300px; } #sub-right { float:right; width:240px; text-align: right; } </style> </head> <body> <div id="wrapper"> <div id="header"><h1>Head</h1></div> <div id="sub-main"> <div id="sub-left"> Right </div> <div id="sub-right"> Left </div> </div> </div> </body> </html>
你可以使用包装类来控制整个文档，或者仅仅使用包含子主类的两列。
我同意Darko Z将“overflow：hidden”应用于＃子标题。 但是，应该提到的是，除非你有指定的宽度或高度，否则清除浮动的overflow：hidden方法不能用于IE6。 或者，如果您不想指定宽度或高度，则可以使用“缩放：1”：
#sub-title { overflow:hidden; zoom: 1; }
这个答案增加了上面的解决scheme来解决你的最后一句话：
如何确保在子标题内留下子版权和子版权
问题是，随着子左侧或右侧子内容的扩展，它们将扩展到子标题下方。 这种行为被devise成CSS，但是对于我们大多数人来说确实会造成问题。 最简单的解决scheme是有一个与CSS清除声明样式的div。
要做到这一点，包括一个CSS语句来定义一个closures的div（可以是清除左或右，而不是两个，这取决于什么Float声明已被使用：
#sub_close {clear:both;}
而HTML变成：
<div id="sub-title"> <div id="sub-left">Right</div> <div id="sub-right">Left</div> <div id="sub-close"></div> </div>
对不起，刚才意识到这是之前发布的，打字时我不应该做出那杯咖啡的回复！
@Darko Z：你说得对，溢出的最好的描述：我发现自动（或溢出：隐藏）的解决scheme是在SitePoint的一个post前一段时间简单清除FLoats ，也有一个很好的描述在456bereastreet文章CSS技巧和窍门第2部分 。 不得不承认懒得自己去实施这些解决scheme，因为闭幕式的作品行得通，虽然它当然很不雅。 所以今后要努力清理我的行为。
认真尝试一些这些，你可以select固定宽度或更stream畅的布局，select是你的！ 真的很容易实现。
IronMyers布局
- CSS布局
- 布局自定义指南
- 750像素的CSS布局
- 950像素的CSS布局
- 100％的CSS布局
更多更多更多
- 布局加拉CSS布局
- Glish CSS布局
- 代码糟糕CSS布局
- 最大deviseCSS布局
- CSS播放CSS布局
您也可以使用CSS Grids框架（如YUI Grids或Blue Print CSS）来实现此目的。 他们解决了大量的跨浏览器问题，并使更简单的列布局成为可能。
用css3最好和简单的方法
#subtitle{ /*for webkit browsers*/ display:-webkit-box; -webkit-box-align:center; -webkit-box-pack: center; width:100%; } #subleft,#subright{ width:50%; }
也许这样的事情…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> #container { width:600px; } #head, #sub-title { width:100%; } #sub-left, #sub-right { width:50%; float:left; } </style> </head> <body> <div id="container"> <div id="head"> #head </div> <div id="sub-title"> #sub-title <div id="sub-left"> #sub-left </div> <div id="sub-right"> #sub-right </div> </div> </div> </body> </html>
而不是使用overflow:hidden ，这是一种破解，为什么不简单地设置一个固定的高度，例如height:500px ，对于父分区呢？
#sub-left, #sub-right { display: inline-block; }
通过Bootstrap Grid ，您可以轻松获得跨浏览器兼容的解决scheme。
<div class="container"> <div class="row"> <div class="col-sm-6" style="background-color:lavender;"> Div1 </div> <div class="col-sm-6" style="background-color:lavenderblush;"> Div2 </div> </div> </div>
jsfiddle： http : //jsfiddle.net/DTcHh/4197/
你这样做：
<table> <tr> <td colspan="2">TITLE</td> </tr> <tr> <td>subleft</td><td>subright</td> </tr> </table>
简单 – 花了我1分钟打字。 记住，CSS文件需要下载到客户端，所以不要担心额外的标签华夫cookies，在这种情况下，它的重大事件。
