当浏览器缩小时，如何将行的行固定到网页？

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;
    display: block;
    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

这里有 MANY 选项之一：

<div class="box">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</div>

并且CSS如下：

.box{width:100%;}
.row{width:100%; height:200px;  white-space: nowrap; display:block; margin:3% auto}
.item{border:2px solid #666; display:inline-block; width: 30%; height:200px; text-align:center; margin:3% 1% }

但你可以使用表模型，flex模型，浮点模型等。这非常简单和基本，所以我强烈建议你阅读一些CSS教程以获得基础知识，或者你赢了'能够走得更远。

编辑：没有注意到您发布了一些CSS，但由于您没有发布任何HTML，这是最重要的部分，您可以根据您的需要调整此示例，只需更改名称就是这样