0

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; }

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

4

1 回答 1

1

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

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

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

于 2013-06-12T15:59:40.633 回答