css layout-嵌套div divins影响包含div [英] css layout- nested div margins effect the containing div

问题描述

嵌套div（#main）的上边距正在拉下它包含的div（#middle）以及它旁边的2个浮动div。如果我向#middle添加边框，此问题会自行纠正并为我提供所需的效果。但是，我想了解问题并取消边界。这是我用来说明我的问题的测试页面

The top margin of a nested div (#main) is pulling down its containing div (#middle) along with the 2 floated divs flanking it. This problem corrects itself and gives me the desired effect if I add a border to #middle. However I''d like to understand the problem and do away with the border. Here is a test page I made to illustrate my problem

展开 | 选择 | Wrap | 行号

推荐答案

我'我想去睡觉。


永远记住父元素永远不会扩展以包含它们的浮动元素。 IE会这样做，但这是一个错误。在任何情况下，将''overflow：auto''添加到#middle会使其展开以包含溢出的这些元素。它。


我会解释为什么它会发生在那里，但我真的很傻。希望你能看到它，所以我不必在早上再次通过它。 ：）

I''m trying to go to bed.

Always remember that parent elements are never to expand to contain their floated elements. IE does this but it''s a bug. In any case, adding ''overflow:auto'' to #middle causes it to expand to contain these elements that "overflow" it.

I''d explain more as to why it''s happening there but I''m literally woozy. Hope you see it so I don''t have to go through it again in the morning. :)

我看不到＃main，＃left或#right如何溢出#middle。 #left和#right定义的宽度为100px，浮动，因此它们不会溢出#middle。当#main的左右边距为110px时，它会在两个浮点之间蜿蜒，其宽度由#wrap的宽度决定，也不会溢出#middle。即使是在身高方面，#main的额外60px上边距仍然比#middle短。


我也没看到如果是因为加入边框会纠正问题溢出。

I dont see how #main, #left or #right are overflowing #middle. #left and #right have defined widths of 100px, are floated and so they do not overflow #middle. With #main having left and right margins of 110px, it winds up between the two floats, its width then being determined by the width of #wrap and also does not overflow #middle. Even heightwise, #main with its additional 60px top margin is still shorter than #middle.

I also don''t see how adding a border would correct the problem if it was due to overflow.

这是你的''主要'部门。它的优势正在推动你的头部划分。使用overflow：auto;像drhowarddrfine说会解决你的问题，因为你的主分区顶部边缘溢出你的中间分区。您的选择是删除主要部门的上边距。所以这里有两个选项：


删除空格并保留边距。

It''s your ''main'' division. Its margin-top is pushing your header division up. Using overflow:auto; like drhowarddrfine said will fix your problem because your main division top margin is overflowing your middle division. Your over option would be to remove the top margin in your ''main'' division. So here are your two options:

Remove space and keep margin.

展开 | 选择 | 换行 | 行号

这篇关于css layout-嵌套div divins影响包含div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！