Question

当我把第一和第二个div放入主div时，它不在他身上，但在外面。请将其粘贴到文本编辑器中并运行它以查看问题，并告诉我我做错了。

HTML

<head>
  <title>TEST</title>    
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="main.css">  
</head>
<body>
  <div class="main">
    <div id="second_div"></div>     
    <div id="facebook"></div>
    <div id="twitter"></div>
  </div>
</body>

CSS

div.main {
    background-color: gray;
    height: 1000px;
    width: 1260px;
    padding: 0px;
    margin: 0px;
}

* {
   padding: 0px;
   margin: 0px;
   overflow: hidden;
}

#second_div {
    background-color: brown;
    height: 280px;
    width: 1150px;
    border: 4px solid black;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 20px;
    overflow: hidden;
    float: left; 
}

#twitter {
    background-color: lightblue;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 980px;
    margin-top: 180px
}

#facebook {
    background-color: darkblue;
    height: 100px;
    width: 200px;
    margin-top: 20px;
    margin-right: 80px;
    margin-left: 980px;
}

Answer 1

＆＃13;

<div class="main">
  <div id="second_div">
  <div id="facebook"></div>
  <div id="twitter"></div>
  </div>
</div>

＆＃13;

Answer 2

div.main {
    background-color: gray;
    width: 1260px;
    padding: 0px;
    margin: 0px auto;
}

* {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

#second_div {
    background-color: brown;
    height: 280px;
    width: 1150px;
    border: 4px solid black;
    display:inline-block;
    verticle-align:top;

}

#twitter {
    background-color: lightblue;
    height: 100px;
    width: 200px;

    display:inline-block;
    verticle-align:top;
}

#facebook {
    background-color: darkblue;
    height: 100px;
    width: 200px;
    display:inline-block;
    verticle-align:top;
}

Answer 3

HTML

<div class="main">
  <div id="second_div">
   <div id="facebook"> </div>
  <div id="twitter"> </div>
  </div>
</div>

CSS

.main {   background:gray; overflow:hidden; padding:50px;}
#second_div {   background:brown; height:50%; overflow:hidden; border: 4px solid black; padding:20px;}
#facebook { float:left; background:darkblue; width:100px; height:150px; margin-right:20px;}
#twitter { float:left; background:lightblue; height:150px; width:150px;}

HTML / CSS div是应该的位置

3 个答案: