Html CSS显示内联块如何防止重新排列？

我有一个小问题。通常情况下，如果屏幕变小，我会同意在屏幕上重新排列div，但对于这个特殊的情况，我希望他们保持原样

我认为这可能是由于内联块造成的，但我需要所有4个彩色矩形来显示它们在大屏幕上的显示方式（彩色块是2x2，大块也是并排的）

当屏幕缩放时，它会将所有内容放置在彼此的顶部。我其实不想看到这种效果，怎么能避免呢

#工具{
背景色：#EEAD0E；
光标：指针；
}
#角落{
背景色：#009ACD；
光标：指针；
}
#专家{
光标：指针；
背景色：#BDD09F；
}
.浮箱{
显示：内联块；
宽度：380px；
高度：105px；
利润率：10px；
边框：3px实心#73AD21；
}
#压力{
背景色：#00FF00；
光标：指针；
}
#讨论{
背景颜色：绿色；
光标：指针；
}
.浮箱2{
显示：内联块；
宽度：350px；
高度：305px；
利润率：10px；
边框：3px实心#D3；
}

当你有一个像你有

宽度：380px这样的固定尺寸时，很明显它们不适合在一起。您需要设置一个百分比宽度

请参见此处

如果添加文本，请将
垂直对齐：top
添加到浮动框中。这是因为
display:inline块
自动暗示
垂直对齐：基线

代码：

您有一个固定的宽度为
380px
，因此如果屏幕位于
760px
下方，这些元素自然会堆叠起来。如果您希望这有点响应性，请查看以下内容：为什么插入文本会将顶部两个块中的div向下推？将
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;
}