4つの四角形の正方形を作る

Question

私は3つの部分を含むCSSレイアウトに取り組んでいます。 1平方メートルの画像、1平方メートルの2つの上の四角形、および1つの下の四角形、および1平方メートルの四角形がメインスクエアの内側にあります。私は最初の2つのダウンを持っていると確信していますが、私が問題を抱えていることに取り組んでいるのは、その中の四角形の四角です。

私はこの種の作品を持っていますが、大きなビューポートの外にあるものは崩壊します。ここに私のコードは、誰かが同様のものを構築している？あなたが幅を定義している場合

.test { 
 
    width: 100%; 
 
    height: auto; 
 
    border: 1px solid red; 
 
    display: block; 
 
} 
 
.inner { 
 
    width: calc(49% + 13px); 
 
    display: inline-block; 
 
    height: 100px; 
 
    margin: 0px -6px 0px 0px; 
 
} 
 
.inner:nth-child(even) { 
 
    border: 1px solid blue; 
 
} 
 
.inner:nth-child(odd) { 
 
    border: 1px solid green; 
 
}

<div class="test"> 
 
    <div class="inner"> 
 
    1 
 
    </div> 
 
    <div class='inner'> 
 
    2 
 
    </div> 
 
    <div class="inner"> 
 
    3 
 
    </div> 
 
    <div class="inner"> 
 
    4 
 
    </div> 
 
</div>

Answer 1

あなたは2x2のグリッドを探しているとflexboxを使用していない場合、私はinline-blockの代わりに浮くでしょう。

* { 
 
    box-sizing: border-box; 
 
} 
 
.test { 
 
    border: 1px solid red; 
 
    overflow: hidden; // clearfix 
 
} 
 
.inner { 
 
    width: 50%; 
 
    float: left; 
 
    height: 100px; 
 
} 
 
.inner:nth-child(even) { 
 
    border: 1px solid blue; 
 
} 
 
.inner:nth-child(odd) { 
 
    border: 1px solid green; 
 
}

<div class="test"> 
 
    <div class="inner"> 
 
    1 
 
    </div> 
 
    <div class='inner'> 
 
    2 
 
    </div> 
 
    <div class="inner"> 
 
    3 
 
    </div> 
 
    <div class="inner"> 
 
    4 
 
    </div> 
 
</div>

box-sizing: border-box;あなたの幅/高さの宣言とパディングとボーダーを含めることができます。あなたがそれらを望まないときに、パディングとボーダーが要素を折り返すときに役立ちます。

Answer 2

、幅の1％が13px未満である任意の画面は、それが2つのdivクラスをインラインで収まらないので、ラップを引き起こすことが起こっています。なぜちょうどwidth: 50%;を設定しないのですか？

編集：私はあなたがこれに似た何かを探しているという仮定の下で午前：https://jsfiddle.net/tfovunso/

Answer 3

あなたはこのような何かを意味していますか？ 4つの小さな正方形から1つの大きな正方形とラッパーの全幅を使用しますか？

* { 
 
    box-sizing: border-box; 
 
} 
 
.test { 
 
    width: 100%; 
 
    height: auto; 
 
    box-shadow: 0 0 0 1px red; 
 
    display: block; 
 
} 
 
.test:after { 
 
    content: ' '; 
 
    clear: both; 
 
    display: block; 
 
} 
 
.inner { 
 
    position: relative; 
 
    float: left; 
 
    width: 50%; 
 
    display: block; 
 
    padding-top: 50%; 
 
    margin: 0; 
 
} 
 
.inner:nth-child(even) { 
 
    box-shadow: inset 0 0 0 1px blue; 
 
} 
 
.inner:nth-child(odd) { 
 
    box-shadow: inset 0 0 0 1px green; 
 
} 
 
.inner > div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
    overflow-y: auto; 
 
    padding: 10px; 
 
}

<div class="test"> 
 
    <div class="inner"> 
 
    <div>1</div> 
 
    </div> 
 
    <div class='inner'> 
 
    <div>2</div> 
 
    </div> 
 
    <div class="inner"> 
 
    <div>3</div> 
 
    </div> 
 
    <div class="inner"> 
 
    <div>4</div> 
 
    </div> 
 
</div>

Answer 4

これはあなたが探しているものですか？

https://jsfiddle.net/jpezninjo/0bp0ha03/

idk what goes here dammit stackoverflow 

コードが従うことは、かなり簡単なはずです。奇妙な子供たちは左に浮かんでいて、私は偶数人の子供たちが残りの空間を占めるようにしています。あなたのmargin: 0px -6px 0px 0pxを削除しなければならないことに注意してください。

私はdivの残りの幅をいくつかの時間前に取る方法を調べることについて学んだ "ブロックフォーマットのコンテキスト"と呼ばれるものを利用しています。

それはあなたがここにポストを見つけることができますoverflox: hiddenとfloat: none

を持っているのx、残りの幅を取るしたいdivを必要とします：Expand a div to take the remaining width