Question

我正在尝试将一个div放在另一个div下面，但代码无法正常工作。正如您在下面的代码中看到的那样，有包装器（“#main”），然后是顶部（“＃top”），向左浮动，内容（“＃content”），向左浮动和向左清除。这是代码：

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <title></title>
    </head>
    <body>
        <div id="main">
            <div id="top">

            </div>
            <div id="content">

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

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

CSS：

#top{
    width: 100%;
    height: 100%; <!-- Already tried putting fixed height -->
    left: 0px;
    top: 0px;
    position: absolute;
    background-color: #ff0000;
    display: block;
    float: left;
}

#content{
    width: 600px;
    height: 400px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #999999;
    position: absolute; <!-- Already tried removing this line -->
    display: block; <!-- Already tried removing this line and the same one from #top-->
    float: left; <!-- Already tried removing this line -->
    clear: left; <!-- Already tried clear:both -->
}

但是，出于某种原因，灰色div不会在红色的下面。我不知道发生了什么。请在下面找到我浏览器上显示的图片。

enter image description here

Answer 1

试试这个：

#top{
    width: 100%;
    height: 300px;
    background-color: #ff0000;
    float: left;
    margin: 0;
}

#content{
    width: 600px;
    height: 400px;
    background-color: #999999;
    float: left;
    clear: both; 
}

如果你想要＆＃34;内容＆＃34;为了更多，你可以做其他事情：

#content {
 width: 600px;
 height: 400px;
 background-color: #999999;
 clear: both; 
 //NOTE MARGIN 0 auto will center the div for you
 margin: 0 auto;
 // or set a margin yourself ex:
 margin: 0 5px 0 30px;
}

Answer 2

如果top位于绝对位置，则无法清除左侧，

尝试删除此属性表单#top

 position:absolute;

来自#content remove

 position:absolute;
 transform: translateX(-50%);
 float:left;

Answer 3

事情是：当我删除

position:absolute

来自#top和#content的

，#top失去了其高度属性。此外，Chrome上会出现一个小的白色边距。我找到的唯一解决方案是包含position:absolute和top:0; and left:0;

我现在使用的代码是

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <title></title>
    </head>
    <body>
        <div id="main">
            <div id="top">
                <p>aaa</p>
            </div>
            <div id="content">

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

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

CSS：

#top{
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    float: left;
    margin: 0;
}

#content{
    width: 600px;
    height: 400px;
    background-color: #999999;
    float: left;
    clear: both; 
}

但我希望#top在页面加载时填充所有页面，然后用户在向下滚动时会有更多内容。

请查看实际页面的图片：

http://imgur.com/96gnwgv

谢谢！

Answer 4

你可以试试这个

<强> HTML

<body>
    <div id="main">
        <div id="top">
            TOP
        </div>
        <div id="content">
            BOTTOM
        </div>
        <div id="footer">
            FOOTER
        </div>
    </div>
</body>

<强> CSS

#top {
    width: 100%;
    height: 100%; /**as you are giving here a 100% height you need to place some content inside the div **/
    background-color: #ff0000;
    display: block;
    float: left;   
}

#content {
    width: 600px;
    height: 400px;    
    background-color: #999999;
    margin:0 auto;      
}

哟在这里可以看到一个小提琴 http://jsfiddle.net/SoniaGM/ecu3fuzy/

希望这有帮助。

Answer 5

请尝试以下代码删除顶部白线

body{
    margin:0;
    padding:0;
}

绝对位置由左侧和顶部位置的浏览器窗口组成。

请找到html和css代码

<!Doctype>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css"/>

        <title></title>
        <style type="text/css">
        body{
            margin:0;
            padding:0;
        }       

        #main{
             width: 100%;
             height: 100%;
             margin:0 auto;
             background-color: #ff0000;
        }

        #content{
            width: 600px;
            height: 400px;
            margin: 0 auto;
            background-color: #999999;
        }
        </style>
    </head>
    <body>
        <div id="main">           
           <div id="top">
               TOP
            </div>
            <div id="content">
              content
            </div>
            <div id="footer">

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

希望这有帮助。

Answer 6

只需使用translateY翻译即可。这是解决方案：

#top{ width: 100%; height: 100%;  left: 0px; top: 0px; position: absolute; background-color: #ff0000; display: block; float: left; }

#content{ width: 600px; height: 400px; left: 25%; background-color: #999999; position:relative; transform: translateY(150%); }

浮动左侧和清除两个都不能正常工作

6 个答案: