父母以外的孩子div

Question

我目前正在设计一个网站。但是在我的父div box_t中，孩子div box_t1和box_t2超出了box_t。

HTML ：

<div id="main_container">
  <div class="box_t">
    <div class="box_t1">
      <h2>Start</h2>
    </div>
    <div class="box_t2">
      <div class="boxt21">
        <h2>Name</h2>
      </div>
      <div class="boxt22">
        Hi
      </div>
    </div>
  </div>
</div>

CSS ：

#main_container
{
  width:960px;
  margin:0 auto;
}
.box_t
{
  padding:20px 14px 20px 15px;
  color:#07337a;
  overflow:hidden;
}
.box_t h2
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
.box_t1
{
  width:340px;
  float:left;
}
.box_t2
{
  float:left;
}
.box_t2
{
  margin-left:255px;
}
.boxt21
{
  float:left;
}
.boxt22
{
  float:left;
}

Answer 1

你的孩子div不会超出父母div，但是你在梦想中看到的是由于梦想动摇的显示html内容的风格。

在浏览器中检查代码的实际呈现

Answer 2

您应该对父块使用clearfix。 有很多方法可以设置overflow:hidden或设置底部元素，父级内部为clear: both空块。 我最喜欢的方式是：

  // for modern browsers
  .clearfix:before,
  .clearfix:after {
     content: "";
     display: table;
  }
  .clearfix:after {
     clear: both;
  }

  /* IE6-7 */
  .clearfix {
     zoom: 1;
  }

在父div上使用它，就是这样。

Answer 3

您何时使用float作为您的div。请记住clear浮动。整个问题是正确居住的对象的floated objects do not add to the height。因此，子div似乎不在父div之外。我们需要做的就是清除浮动，这整个问题就消失了。把这个空div放在你最后一个浮动物体之后：

<div style="clear: both;"></div>

Answer 4

您需要清除浮动

<div id="main_container">
<div class="box_t">
            <div class="box_t1">
                <h2>Start</h2>
            </div>
            <div class="box_t2">
                <div class="boxt21">
                    <h2>Name</h2>
                </div>
                <div class="boxt22">
                    Hi
                </div>
            </div>

            

    </div>

有一种更好的方法可以做到这一点，创建一个名为clearfix的类并将其添加到br ......实际上你甚至应该包括一个......但是你去了。

Answer 5

我建议在开发布局时在所有div上使用边框（style =“border：1px solid red”），这有助于了解div的确切位置。

这有助于不使用Dreamweaver或其他编辑工具的开发人员。