CSS表示のインラインブロックどのように再配置を防止できますか？

Question

私は小さな質問があります。通常は、画面が小さくなると画面上のdivを整理するのは大丈夫ですが、この特定のケースでは、それらをそのまま残しておきたいものです。

私はこれを引き起こす可能性のあるそのインラインブロックと思うが、私は、彼らが大画面に表示する方法を表示するためにすべての4色の四角形が必要 - （カラフルなブロックが2×2であり、大きなものである全体並んでいる）。

画面が拡大縮小されると、画面はすべて上下に配置されます。私は実際にこの効果を望んでいません - どのようにこれを避けることができますか？あなたはそれは彼らが一緒に収まらない明らかだwidth:380px持っているように、あなたがして固定されている

#tools{ 
 

 
background-color: #EEAD0E; 
 
cursor:pointer; 
 

 
} 
 
#corner{ 
 

 

 

 
background-color: #009ACD; 
 
cursor:pointer; 
 
} 
 
#expert{ 
 
cursor:pointer; 
 
background-color:#BDD09F; 
 
} 
 

 
.floating-box { 
 
    display: inline-block; 
 
    width: 380px; 
 
    height: 105px; 
 
    margin: 10px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
#pres{ 
 

 
background-color: #00FF00; 
 
cursor: pointer; 
 
} 
 
#discussions{ 
 

 
background-color: green; 
 
cursor: pointer; 
 
} 
 

 

 
.floating-box2 { 
 
    display: inline-block; 
 
    width: 350px; 
 
    height: 305px; 
 
    margin: 10px; 
 
    border: 3px solid #d3d3d3; 
 
}

<div class="floating-box2"></div> 
 
<div class="floating-box2"></div> 
 

 

 
<div id="expert" class="floating-box"> 
 
<img src="image.png"/></div> 
 
<div id="tools" class="floating-box"><img src="image2.png"/></div><br> 
 
<div id="discussions" class="floating-box"><img src="image3.png"/></div> 
 
<div id="corner" class="floating-box"><img src="image4.png"/></div>

Answer 1

。パーセント幅を設定する必要があります。

テキストを追加する場合は、ここjsfiddle

を参照して、浮動ボックスにvertical-align:topを追加します。

#tools{ 
    background-color: #EEAD0E; 
    cursor:pointer; 
} 
#corner{ 
    background-color: #009ACD; 
    cursor:pointer; 
} 
#expert{ 
    cursor:pointer; 
    background-color:#BDD09F; 
} 
.floating-box { 
    display:inline-block; 
    width: 49%; 
    height: 105px; 
    box-sizing:border-box; 
    border: 3px solid #73AD21; 
    vertical-align:top; 
} 
#pres{ 

    background-color: #00FF00; 
    cursor: pointer; 
} 
#discussions{ 

    background-color: green; 
    cursor: pointer; 
} 
.floating-box2 { 
    display:inline-block; 
    width: 49%; 
    height: 305px; 
    border: 3px solid #d3d3d3; 
    box-sizing:border-box; 
    vertical-align:top; 
}