1

私はdivに簡単な問題があります。フロートされていない 1 つの DIV 内に 3 つの DIV をフロートするにはどうすればよいですか?

これが私のコードです：

<div style="margin:0 auto;width:1240px;border:1px solid #000000;">
    <div style="width:200px;height:50px;float:left;border:1px solid #000000;">
        test    
    </div>
    <div style="width:200px;height:50px;float:left;border:1px solid #000000;">
        test    
    </div>
    <div style="width:200px;height:50px;float:left;border:1px solid #000000;">
        test    
    </div>
</div>

この親DIV内に子DIVをフロートするか、フローティングせずに中央に配置する方法が必要です...display：inline-blockは、高さが異なり、1つのdivが画像であるため、子divに対しては機能しません...それらをフロートさせてマージンを最適化するのが最善の方法だと思います...この場合、親divを画面の中央に配置したいので、floatの代わりにmargin:0 autoを使用しますが、これにより子divが伸びません親 div であり、細い線として表示されます。

問題を理解するために作成したフィドルをテストできます: http://jsfiddle.net/tQpM5/

ありがとう

4

5 に答える 5

1

親の div は、コンテンツがフローティングで、高さが 1px に設定されているため、線として表示されます。これを解決するには、この要素の後のフロートをクリアする必要があります。多くの場合、クリアフィックスと呼ばれます。

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}

その後、通常どおり子供を浮かせることができます。親で margin: auto を使用して中央揃えにしました。

このデモを参照してください:

http://jsfiddle.net/c2NjZ/

clearfixing での古いブラウザのサポートについては、次を参照してください。

http://css-tricks.com/snippets/css/clear-fix/

于 2013-02-12T00:57:50.153 に答える
1

コンテナー div の float 値とその子 div の float 値 (または float なし) は互いに独立しています。親 div を閉じる前に、子 div をクリアする必要があります。

<style type="text/css">
.clearfloat {clear:both;height:0;font-size:1px;line-height:0px;}
</style>

<div class="parent">
    <div class="child" style="float:left;">
        Hi
    </div>
    <div class="child" style="float:right;">
        There
    </div>
    <br class="clearfloat">
</div>

例を更新してください: http://jsfiddle.net/tQpM5/2/

于 2013-02-12T00:58:30.980 に答える
1

必要なのは、親 div: を指定overflow:hidden;して、子 div を含めることができるようにすることです。

子 div は横に並んで浮かびますが、ブラウザのサイズを変更すると、互いに下に浮いてしまいます。これを避けるには、親 div にmin-width.

親 div を中央に配置するmargin-left:auto; margin-right:auto;には、 を指定できますが、幅を指定して、伸びないようにし、使用可能な幅をすべて使用する必要があります。

ではなくフロートを使用することを選択したので、残っているのは、あなたが言ったようinline-blockに対処することだけです。margins

デモ

于 2013-02-12T00:52:50.233 に答える
1

私の理解が正しければ、3 つのボックスを同じ行の中央に配置する必要があります。

.wrapper{
  margin:0 auto;
  text-align:center;
  vertical-align: top;
}

.box{
  width:200px;
  height:50px;
  display:inline-block;
  text-align:left;
}

HTML:

<div class="wrapper">
  <div class="box"> 1 </div>
  <div class="box"> 2 </div>
  <div class="box"> 3 </div>
</div>

デモ

于 2013-02-12T00:53:08.100 に答える
1

すべての子 div の幅は親の幅よりも小さいため、自然に並べて配置する必要があります。各子 div に position: relative; を指定してみてください。マージン: 自動。このようにして、彼らは親の中心にいるべきです

于 2013-02-12T00:53:33.383 に答える