如何在div中使用顶部中间和中间

Question

我在另一个容器中有一个容器，我想使用三个部分。 顶部是一个元素，中间是一个元素，底部是一个元素。

有人可以帮我弄清楚如何设置这些元素的样式以使其正确显示吗？

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

Answer 1

你想要这样的东西吗？

http://jsfiddle.net/6tE7k/

您可以更改以下内容：

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

到您需要的任何高度。

如果在全屏模式下查看它，则可以看到它是div容器中的一个div容器。 嵌套的div设置为1024px。