如何分开2 DIVS完全分开彼此(页脚)

时间:2016-02-20 23:09:08

标签: html css

好的,所以我需要做的就是我无法弄明白的是我在一个容器下面有DIV但是我想要一个完全不同的单独的div,所以我可以在那个DIV中放置信息或我需要的任何东西问题是DIV一直坚持DIV在它上面我尝试了位置:绝对,底部:0 - 我尝试了填充顶部,但它似乎只是将容器内的div空间化。我知道该怎么做我似乎无法记住我也试过清楚:两者,但也许我把它放在我忘记的正确位置。我也想也许我应该使用不同的东西将上面的3个div与其他东西放在一起然后浮动:左...我不太确定一些帮助会很棒!谢谢!这将有助于我回到正轨

HTML:

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="index2.css">
    </head>

    <body>
      <div id="container">
          <div id="div1">THIS IS DIV 1</div>
          <div id="div2">THIS IS DIV 2</div>
          <div id="div3">THIS IS DIV 3</div>
      </div>

      <div id="footer">I want this div to be separated from t
          the other ones above. Not only a space between them
          but also to be completly seperate from the others not
          with spacing.
      </div>
      </div> 
    </body>
</html>

CSS:

#container {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    height: 300px;
    border: 1px solid black;
}
#div1 {
    float: left;
    width: 33.3%;
    height: 200px;
}
#div2 {
    float: left;
    width: 33.3%;
    height: 200px;
}
#div3 {
    float: left;
    width: 33.3%;
    height: 200px;
}
#footer {
    width: 500px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}
#foot1 {
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}

1 个答案:

答案 0 :(得分:0)

只需将margin-top添加到您的页脚div

margin-top: 20px;

查看此demo