1

我目前正在设计一个网站。但是在我的一个父 divbox_t中，孩子 divbox_t1和.box_t2box_t

网页：

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

Dreamweaver 设计和代码视图

4

5 回答 5

3

您的子 div 不会超出父 div，但您在 Dream Waver 上看到的内容是由于 Dream Waver 显示 html 内容的风格。

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

于 2012-12-12T11:30:14.067 回答
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 上使用它的类，就是这样。

于 2012-12-12T11:28:19.313 回答
1

每当您使用floatdiv 时。请记住clear浮动。整个问题是floated objects do not add to the height正确驻留的对象的问题。因此子 div 似乎在父 div 之外。我们需要做的就是清除浮动，整个问题就消失了。将这个空 div 放在最后一个浮动对象之后：

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

于 2012-12-12T11:46:14.793 回答
0

你需要清除你的浮动

<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 的类......实际上你甚至应该包括一个 br......但是你去了。

于 2012-12-12T11:24:38.877 回答
0

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

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

于 2013-10-08T07:16:28.657 回答