4浮動div要素

Question

[1] [2] [3] [4]

Iは、4つのDIVは単純CSS使用して、（上記の）左フローティング有する：フロート：左;幅：128px;高さ：私は画面を狭めるよう128px

、最後DIVは、次の行に正しくジャンプ：

[1] [2] [3]

[4]

しかし、私が本当に欲しい対称な外観を維持するために、次の行にジャンプするには、最後の2つのブロックです：

[1] [2]

[3] [4] とスクリーンをさらに絞り込む場合、ブロックは互いに上下に積み重ねる：

[1]

[2]

[3]

[4]

Answer 1

を

[3]と[4]を1つのdivにまとめます（希望する場合は[1]と[2]）。それには最大の幅を与えますが、自動高さを与えます。そうすれば、画面が狭くなると、2つのdivが並んで動くはずですが、画面が狭くなると下に飛びます。

例：

.contain { 
    max-width:256px; 
    height:auto; 
} 

<div class="contain"> 
    <div class="div3">contents</div> 
    <div class="div4">contents</div> 
</contain> 

Answer 2

が各定期div要素の2倍のサイズであることをそのコンテナのdiv要素の幅を設定し、その後、コンテナのdivに2つのdivをラップ試してみてください。ここで

<div class="container-box"> 
    <div class="box">1</div> 
    <div class="box">2</div> 
</div> 
<div class="container-box"> 
    <div class="box">3</div> 
    <div class="box">4</div> 
</div> 

.box {  
    float:left; 
    width:128px; 
    height:128px; 
    background: grey; 
} 

.container-box { 
    float: left; 
    width: 256px; 
    height: 128px; 
} 

はバイオリンへのリンクです：https://jsfiddle.net/wfhk1fak/1/

は、この情報がお役に立てば幸いです。

Answer 3

ここでは、メディアクエリを使用してそれを行う方法の1つです。

max-widthの適切なブレークポイント（たとえば610px）を選択してから、nth-childを選択して、3番目の子エレメントから3番目のすべての子エレメントのフロートをクリアします。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries

.box { 
 
    float: left; 
 
    width: 128px; 
 
    height: 128px; 
 
    background-color: grey; 
 
    margin: 10px; 
 
    box-sizing: border-box; 
 
    border: 2px solid black; 
 
} 
 
.container-box { 
 
    border: 1px dotted blue; 
 
    overflow: auto; 
 
    box-sizing: borderbox; 
 
} 
 
@media (max-width: 610px) { 
 
    .box { 
 
    background-color: yellow; 
 
    } 
 
    .box:nth-child(2n+3) { 
 
    background-color: red; 
 
    clear: left; 
 
    } 
 
}

<div class="container-box"> 
 
    <div class="box">1</div> 
 
    <div class="box">2</div> 
 
    <div class="box">3</div> 
 
    <div class="box">4</div> 
 
</div>