Question

我的代码如下：

<html>
    <head>
        <style type="text/css">
            #container {
            }
            #content {
            }
            a {
                color:#0083cc;
            }
            body {
                margin:0px; padding:0px;
            }
            #header {
                height:20px;
                background-color:#fb0000;
            }
            #section1 {
                margin: 0 auto;
                width: 50%;
                border-style: none none solid solid;
                border-width: 5px;
                border-color: red;
                margin-top: 100px;
            }
        </style>

        <title></title>
    </head>

    <body>
        <div id="container">
            <div id="header"></div>

            <div id="content">
                <div style="float: left;">
                    Test
                </div>
                <div id="section1">
                    <div style="text-align:center;">
                        <h1 style="color:#999999;">Please <a>Login</a> or <a>Signup</a></h1>
                    </div>

                </div>
            </div>
        </div>
    </body>
</html>

我想知道是否有可能让＃section1一直延续到#header底部的边框？同样，是否有可能让包含“test”的div浮动，以便它立即显示在＃content1的边界左侧？

我完全重组页面很好，所以就此消失。

提前致谢！

编辑：实际上，我想要完成的工作就像facebook目前的布局一样..更简单。这可以作为参考来看到最终目标

Answer 1

为什么不在＃section1样式中设置padding-top: 100px;而不是margin-top: 100px;？如果您希望测试内容显示得更低，则可以使用其他规则来实现此目的，例如： #content div:first-child { margin-top: 100px; }。

CSS将div高度扩展到页面顶部

1 个答案: