2

大きな箱を小さな箱で囲おうとしています。すべてcssのみを使用しています。ここにフィドルがあります - http://jsfiddle.net/7nya3/4/ いくつかの問題があります: 左下に空の白いブロックがあります。2 行目の最後のボックスが正しく配置されていません。

それを修正するハンドルはありますか？

<style>
.container {
    width:500px;
    height:500px;
}
.small-box, .large-box {
    width:100px;
    float:left;
    height:100px;
//-moz-box-sizing:border-box;
    border:1px solid white;
    background-color:green;
}

.large-box {
    width:200px;
    //float:left;
    height:200px;
    background-color:orange;
}
</style>
<body>
<div class="container"> 
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="large-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>            
    <div class="small-box">x</div>            

</div>
</body>
4

3 に答える 3

3

問題は、ボックスをフローティングしているときに、大きなボックスが行に追加されるとすぐに、次のボックスがその右または下に移動することです。

解決策は、2 つの小さな箱を特別な垂直コンテナーに入れることです。

    <div class="double-box">
        <div class="small-box">x</div>
        <div class="small-box">x</div>
    </div>

およびCSS:

   .double-box{
       width:100px;
       float:left;
       height:200px;  
   }

配置に関しては、問題は (HaukurHaf が述べたように) 大きなボックスの下/上の 2 つのボックス間のマージンを考慮しなかったという事実です。したがって、ラージ ボックス ( 202px) とダブルボックス ( ) の幅を適切に変更すると、102すべてがそれに応じて表示されます。

これがフィドルです：http://jsfiddle.net/vnsyL/

- 編集 -

コメントで示唆されているように、幅を変更してマージン/ボーダーに適応させる代わりに使用できる別の方法は、box-sizingcss プロパティをborder-box値とともに使用することです。

.small-box, .large-box, .double-box {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
于 2013-11-07T22:20:41.363 に答える
1

Cosmin SD は正しいですが、小さなボックスを見逃したため、追加すると下に移動するため、新しいボックスに別のクラスを追加し、それを使用margin-topして所定の位置に配置し、大きなボックスの幅と高さを増やして右揃えにしますそして下の小さな箱。

http://jsfiddle.net/7nya3/5/

于 2013-11-07T22:29:17.210 に答える