Question

3列2行。所以6箱。第一行3，第二行3。当我减小浏览器大小时，右侧的框会下降到下一行。当我减小浏览器大小时，如何将盒子放在其位置？

代码：

 #content {
    width: 1200px;
    height: 840px;
    background-color: #f9fafa;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}


    .box {
    height: 355px;
    width: 355px;
    background-color: #ffffff;
    border: 1px solid #323232;
    -webkit-transition: background-color 0s ease 0s;
    -moz-transition: background-color 0s ease 0s;
    -ms-transition: background-color 0s ease 0s;
    -o-transition: background-color 0s ease 0s;
    transition: background-color 0s ease 0s;
    float: left;
    position: relative;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    display: block;
    }


<div id="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

Answer 1

将#content设置为min-width: 1200px;。

示例：http://jsfiddle.net/zbf30brf/

Answer 2

我希望这能解决您的问题。当您调整浏览器大小时，有很多方法可以完成3列，我的修复方法是设置某些媒体查询并更改边距。还将宽度从px更改为％，因此没有水平滚动。

这是HTML

<div id="content">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
</div>

和CSS

#content {
    width: 100%;
    height: 840px;
    background-color: #f9fafa;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
.box {
    height: 355px;
    width: 30%;
    background-color: red;
    border: 1px solid #323232;
    -webkit-transition: background-color 0s ease 0s;
    -moz-transition: background-color 0s ease 0s;
    -ms-transition: background-color 0s ease 0s;
    -o-transition: background-color 0s ease 0s;
    transition: background-color 0s ease 0s;
    float: left;
    /*position: relative;*/
    margin: 20px;
    display: block;
}

@media (max-width:1270px) {
    .box { margin: 10px; }
}
@media (max-width:680px) {
    .box { margin: 5px; }
}
@media (max-width:400px) {
    .box { margin: 2px; }
}

正如您所看到的，媒体查询只是我自己的，当我调整浏览器大小时，我正在减少我的保证金。

希望这有效。

当浏览器尺寸减小时，如何防止盒子掉落？

2 个答案: