Question

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

有人可以帮我弄清楚如何设计这些元素以便正确显示吗？

这是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。

如何使用div中的顶部中间和中心

1 个答案: