关于html：在另一个div中包含一个div


Contain one div in another div

本问题已经有最佳答案，请猛点这里访问。

我不明白为什么名为"boxb1"的分区不在名为"bba"的分区内。我试过很多不同的东西，但我就是不能把这些沙发套在窝里。

"bba"accomaodate"boxb1"不应该在其内部吗？我正在尝试在此处创建响应页面。？

J代码的修改。

我的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 html {} body {
   padding-bottom: 1%;
 }
 .container {
   width: 98.3%;
   margin: 10px;
   padding-bottom: 5%;
   position: relative;
 }
 #twlth {
   width: 100%;
   padding-top: 5%;
   padding-bottom: 5%;
   float: left;
 }
 #boxb1 {
   width: 21%;
   padding-bottom: 1%;
   float: left;
   margin: 10px;
   text-align: center;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 }
 .bba {
   width: 100%;
   -webkit-box-shadow: 10px 10px 108px 0px rgba(0, 0, 0, 0.68);
   box-shadow: 10px 10px 108px 0px rgba(0, 0, 0, 0.68);
   padding-bottom: 1%;
   margin-bottom: 100px;
 }
1
2
3
4
5
6
7
8
9
10
11
12
<body>

 
   
      <h1 style="text-align: center">Text
     
        box1
       
     
   
 
</body>

问题是，您使用的是一个浮点：向左，但后面没有"清除"任何内容。非定位和非浮动元素的作用就像浮动元素不在那里一样。因为相对于其他块元素，浮动元素不流动。意思：因为"boxb1"有一个"float:left"，所以它的父级会假装"boxb1"不在那里。

在CSS中添加如下内容：

1
2
3
.clear {
    clear: both;
}

HTML可以这样更改：

1
2
3
    <h1 style="text-align: center">Text
   
        box1

杰西德

请访问：http://www.smashingmagazine.com/2009/10/the-secrety-of-css-float-property/了解更多有关此(和其他潜在解决方案)的信息。