CSS-дисплей встроенного блока Как я могу предотвратить перегруппировку?

Question

У меня есть небольшой вопрос. Обычно я был бы в порядке с перестановкой divs на экране, если экран меньше, но для этого конкретного случая - я хочу, чтобы они оставались тем, чем они не важны.

Я думаю, что это встроенный блок, который может быть причиной этого, но мне нужны все 4 цветных прямоугольника, чтобы отобразить, как они отображаются на большом экране - повсюду (красочные блоки - 2x2, а большие - бок о бок).

Когда экран масштабируется, он помещает все друг на друга. Я действительно не хочу этого эффекта - как этого можно избежать?

#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

когда вы фиксированный с как у вас есть width:380px это очевидно, что они не подходят друг к другу. вам нужно установить процентную ширину.

посмотреть здесь jsfiddle

если добавить текст, добавить vertical-align:top к плавающей коробке. это происходит потому, что display:inline-block автоматически подразумевает vertical-align:baseline

код:

#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; 
}