1

次のようなモジュールのグリッドを作成しようとしています。

ここに画像の説明を入力してください

私は単一のモジュールのスタイルを持っており、必要なサイズに応じて各ボックスのdivクラスに追加するすべての異なるサイズのボックスのクラスがあります：（100％/ 50％/ 33％/ 25％width＆身長）。

上の画像の左上に表示されているボックスを積み重ねようとしています。周囲のボックスのフロートをオーバーライドするには、別のクラスを1つか2つ作成する必要があると思いますが、どうすればよいかわかりません。これが私のコードです：

ここに簡単なフィドルがあります

これが現在のコードです

HTML：

<div class="box width_25 container_150">
    <div class="header">Half Size Title</div>
    <div class="content">
        Top box
    </div>
</div>
<div class="box width_25 container_150">
    <div class="header">Half Size Title 2</div>
    <div class="content">
        Box right below
    </div>
</div>

<div class="box width_50 container_300">
    <div class="header">Total Mentions</div>
    <div class="content">
        Center div
    </div>
</div>

<div class="box width_25 container_300">
    <div class="header">Title</div>
    <div class="content">
        Right div
    </div>
</div>

CSS：

/* Variable Widths */

.box {
    display:block;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
    margin: 1%;

    background: #FFF;
    color: #333;
    border:1px solid #DDD;
    box-shadow:0px 0px 5px 1px #DDD;
}

.width_100 {
    display: inline-block;
    float: left;
    width: 98%;
}

.width_50 {
    display: inline-block;
    float: left;
    width: 48%;
}

.width_33 {
    display: inline-block;
    float: left;
    width: 31.33%;
}

.width_25 {
    display: inline-block;
    float: left;
    width: 23%;
}

.container_150 {
    height:130px; // not 150px to compensate for margins
}
.container_200 {
    height:200px;
}
.container_250 {
    height:250px;
}
.container_300 {
    height:300px;
}
.container_400 {
    height:400px;
}
4

1 に答える 1

4

それを達成するには、積み上げられたdivをdivでラップする必要があります

<div style="width:30%;float:left">
    <div style="width:100%; background:blue; height:100px"></div>
    <div style="width:100%;  background:yellow; height:100px"></div>
</div>
<div style="width:70%; float:right;background:red; height:200px"></div>

このフィドルをチェックしてください

于 2013-02-08T21:11:51.930 に答える