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>また、2 つの div の間を削除しました。ご協力いただきありがとうございます！

4

1 に答える 1

1

これは、div が で設定されているためposition: absolute;です。これにより、ドキュメント フローから div が削除されるため、それを含む要素は、そのレイアウトに div が存在しないかのように動作します。

何をしようとしているのか正確にはわかりませんが、2 つの div の位置を調整したい場合は、相対位置を試すか、マージンとパディングを調べてください。CSS リセットは、特にブラウザー間で一貫したレイアウトを作成するための一般的なツールとして非常に役立ちます。

これは私の提案の jsfiddle で、div を並べて表示し、コンテナが希望どおりに動作していることを示しています。 http://jsfiddle.net/wCnLZ/

于 2013-06-12T15:59:40.633 に答える