0

3 つのセクションを使用したい別のコンテナー内にコンテナーがあります。一番上の要素、真ん中の要素、一番下の要素。

これらの要素を適切に表示するためにスタイルを設定する方法を誰かが教えてくれますか?

http://jsfiddle.net/WSFnX/877/

HTMLコードは次のとおりです。

<div class='main'>
    <div class='outer'>
        <div class='inner'>
            <b>header</b>
            <hr/>
            <h3>Middle Text</h3>
            <img src="http://dummyimage.com/50x50/f0f/fff"/>
        </div>
    </div>
</div>

およびCSS:

.main {
    background: #ccc;
    width: 900px;
    height: 600px;
    padding: 50px;
}

.outer {
    border: 1px solid #ccc;
    width: 800px;
    height: 500px;
    border-radius: 5px;
    margin: 10px auto;
    background: #fafafa;
}

.inner {
    border: 1px solid #ccc;
    width: 400px;
    height: 300px;
    margin: 50px auto;
    background: #fff;
    text-align: center;
    position: relative;
}

.inner b {
    font-size: 0.65em;
    text-align: center;
}

.inner hr {
    margin: 0;
    padding: 0;
}
4

1 に答える 1

1

このようなものが欲しかったですか？

http://jsfiddle.net/6tE7k/

これらを変更できます:

min-height:500px;
min-height:100px;

必要な高さに。

フルスクリーンで見ると、div コンテナー内の div コンテナーであることがわかります。ネストされた div は 1024px に設定されています。

于 2013-10-16T18:58:46.007 に答える