Question

HTML：

            <div id="main" class="rounded-corners">

                <div id="benefits">

                    <img src="/benefits-heading.png" style="padding: 30px;" />

                    <div id="corporateside">
                        <h1>Corporate Benefits</h1>    
                        <p>blah</p>
                    </div>

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

                    <div id="employeeside">
                        <h1>Employee Benefits</h1>
                        <p>blah</p>
                    </div>

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

                </div>

            </div>

CSS：

#corporateside { width: 420px; height: 100%; position: absolute; left: 0; padding: 20px; height: 100%; display: block;  }
#corporateside h1 { font-size: 24px; font-weight: 500; }
#corporateside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#corporateside p { padding: 0px; margin-top: -10px; }
#employeeside { width: 420px; position: absolute; right: 0; padding: 20px; height: 100%; display: block;  }
#employeeside h1 { font-size: 24px; font-weight: 500; }
#employeeside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#employeeside p { padding: 0px; margin-top: -10px; }
#benefits { position: relative; height: auto; }
#main { width: 940px; height: auto; background-color: #ffffff; margin: 0 auto; padding: 0; background: #ffffff; border: 2px solid #ffc40d; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }

我已通过从每个div中删除position: absolute;来解决此问题。我还删除了两个div之间的<div style="clear: both;"></div>。谢谢你的帮助！

Answer 1

这是因为您的div设置为position: absolute;。这将从文档流中删除div，因此包含元素的行为就像div的布局不存在一样。

我不确定你的目的是什么，但是如果你想调整两个div的位置，请尝试相对位置或检查它们的边距和填充。 CSS重置作为制作一致布局的通用工具非常有用，尤其是跨浏览器。

这是我的建议的jsfiddle，并排显示div，容器按照需要运行。 http://jsfiddle.net/wCnLZ/

为什么我的两个div不会扩展包含div的整个高度？

1 个答案: