Question

我无法理解为什么名为“boxb1”的div不在名为“bba”的div中。我尝试了很多不同的东西，但我无法嵌套这些div。

本身不应该“bba”accomaodate“boxb1”吗？我想在这里创建一个响应式页面。？

我的代码：

 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;
 }

<body>

  <div class="container">
    <div class="bba">
      <h1 style="text-align: center">Text</h1>
      <div id="boxb1">
        <h3>box1</h3>
        <div id="twlth" width="10%" height="6%"></div>
      </div>
    </div>
  </div>
</body>

Answer 1

问题是你正在使用浮动：左，但不是＆＃34; t＆＃34;清除＆＃34;之后的任何事情。非定位和非浮动元素的作用就像浮动元素不在那里一样。因为浮动元件相对于其他块元件不流动。含义：因为＆＃39; boxb1＆＃39;有一个＆＃39; float：left＆＃39;它的父母会假装＆＃39; boxb1＆＃39;不在那里。

在css中添加如下内容：

.clear {
    clear: both;
}

html可以像这样改变：

<div class="container">
<div class="bba">
    <h1 style="text-align: center">Text</h1>
    <div id="boxb1">
        <h3>box1</h3>
        <div id="twlth" width="10%" height="6%"></div>
    </div>    
<div class="clear"></div>
</div>

Jsfiddle

有关此（以及其他可能的解决方案）的更多信息，请参阅：http://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/

在另一个div中包含一个div

1 个答案: