CSS布局问题，浮动，嵌套divs

好的，我已收到我正在处理的这个个人网站上的一些有用信息。在我混乱的嵌套divs中，我为自己创造了一些问题。我已经将该图像和其旁边的文本都浮在另一个div中，并将该div对中，这很好。但是为了在它下面创建一个新段落，我必须将该段落放在一个div中，因为它上面的浮动需要清除（或者在div旁边的右边显示文本）。我相信有一种更简单的方式来做我想做的事情。如果有人可能能够看看我的代码，并看看我的错在哪里结构明智这将是一个很大的帮助...非常感谢。CSS布局问题，浮动，嵌套divs

正如您所看到的那样，标题中显示“最近的工作”正在按照它应有的居中，但它没有被赋予通常在其上方框中的边界。

这里是链接：

http://danberinger.com/

来源

2010-02-07 Dan

我不确定我是否遇到了问题...如果您希望#news部分继续向下，只需在CSS中给它一个边缘顶部...元素应该具有的通常距离另一个...你必须设置它.. – 2010-02-07 21:30:37

是啊，事情是给新闻部分边际顶端不起作用，wsanville的答案确实工作我只是不知道这是否是某种黑客。 – Dan 2010-02-07 21:41:24

的问题是，intro_container并不需要它的孩子的整个高度。您将通过把一个元素与清晰的风格2周的div你是浮动后设置获得预期的效果：

<div id="intro_container"> 

    <div id="messagebox"> 
    ... 
    </div> 

    <div id="picture"> 
    ... 
    </div> 

    <div style="clear: both"></div> 
</div>

这将给“近期工作”正常的填充。

来源

2010-02-07 21:22:49 wsanville

嘿，谢谢你的解决方案。这确实奏效，但我想知道是否应该调整intro_container的高度并将其设置得更大？ – Dan 2010-02-07 21:42:01

给它一个高度也可以，但它不会适应其孩子的身高。使用overflow：hidden; intro_container似乎是最好的方式。 – wsanville 2010-02-07 21:50:19

把overflow:hidden;到div#intro_container选择上线110

理解为什么它的工作原理阅读这里：http://csswizardry.com/floats/

来源

2010-02-07 21:23:28 antpaw

我认为CSS clearfix会做你所描述的，而无需额外玷污你的代码到底是什么div元素。 http://www.webtoolkit.info/css-clearfix.html只需将CSS样式和.clearfix类添加到正在从浮动子项中折叠的任何div。

来源

2010-02-08 03:39:03

CSS布局问题，浮动，嵌套divs

回答

相关问题