如何在另一个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-leftsub-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,在这种情况下,它的重大事件。