1

親 div に clid div を配置しようとしていますが、親 div の高さは動的である必要があるため、子 div が内部に配置された後に拡大または縮小する必要があります。どうすればそれを達成できますか？子は常に親の中にとどまるべきです。

私はまったくデザイナーではないので、 「 10 のステップで CSS の配置を学ぶ」を読んで少し学びました。

そして、この質問「絶対配置されたdivを親divの高さで拡張する」。

ありがとう

JSFIDDLE

ここに画像の説明を入力

CSS

#header
{
    margin: 0 auto;
    border: 1px solid #000000;
    width: 500px;
    background: #aa0000;    
}
#body
{
    margin: 0 auto;
    border: 1px solid #000000;
    width: 500px;
    background: #ff0000;    
}
#footer
{
    margin: 0 auto;
    border: 1px solid #000000;
    width: 500px;
    background: #dd0000;    
}

#section_one
{
    position: relative;
    width: 100px;
    height: 100px;
    background: #EEEEEE;
    top: 10px;
    left: 10px;
}
#section_two
{
    position: relative;
    width: 100px;
    height: 100px;
    background: #EEEEEE;    
    top: 10px;
    left: 150px;
}

HTML

<div id="header">HEARDER</div>

<div id="body">
    <div id="section_one">SECTION ONE</div>
    <div id="section_two">SECTION TWO</div>
</div>

<div id="footer">FOOTER</div>
4

2 に答える 2

1

これらのボックスを整列させるだけの問題である場合は、絶対配置の代わりにmargin& paddingandを使用してください。inline-blockこのように: http://jsfiddle.net/avrahamcool/JVh8e/1/

HTML:

<div id="cover">
    <div id="section_one">SECTION ONE</div>
    <div id="section_two">SECTION TWO</div>
</div>

CSS

#cover
{
    margin: 0 auto;
    padding: 5px;
    width: 500px;
    background-color: #000000;
}
#section_one, #section_two
{
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #EEEEEE;
}

提供したリンクを既に読んでいるように、絶対要素がフローから削除されるため、カバーの必要な高さを見つけるスクリプトを作成するつもりがない限り、それは不可能です。

また、background-color代わりに使用しbackgroundます（色のみを適用する場合）

これを更新 して新しいフィドルです（編集後）： http://jsfiddle.net/avrahamcool/JVh8e/5/

更新 2: スクリプトを使用したこの作業例を確認してください。 http://jsfiddle.net/avrahamcool/JVh8e/6/

于 2013-09-10T08:30:06.707 に答える