Question

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

我认为可能导致这种情况的内联块，但是我需要所有4种颜色的矩形来显示它们在大屏幕上显示的方式 - 整个过程中（彩色块是2x2和大的也是并排的。）

当缩放屏幕时，它会将所有屏幕放在一起。我实际上不希望这种效果 - 如何避免这种情况？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

1 个答案: