1

私は現在ウェブサイトをデザインしています。しかし、私の親divの1box_tつでは、子divが外に出box_t1ます。box_t2box_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;
}

Dreamweaverのデザインとコードビュー

4

5 に答える 5

3

子のdivは親のdivの外に出ませんが、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でitクラスを使用すると、それだけです。

于 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 に答える