html - CSS 显示内联 block 如何防止重排？

Question

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

我认为可能是 inline-block 导致了这种情况，但我需要所有 4 个颜色矩形来显示它们在大屏幕上的显示方式——贯穿始终(彩色 block 是 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 添加到 float 框。这是因为 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;
}