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

-1

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

image sample

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

来源

2014-09-05 S N

这里有之一，是许多选项来做到这一点：

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

但是，您可以使用表模型，弹性模型，浮点模型等。这非常简单和基本，所以我强烈建议您阅读一些CSS教程以获取基本知识，或者您将无法走得更远。

编辑：没有注意到你发布了一些CSS，但因为你没有张贴任何HTML这是最重要的部分，你可以适应这个例子您的需求，只是改变了名字，这就是它

来源

2014-09-05 05:25:20 Devin

感谢您的回答。如果我需要盒子具有特定的宽度和高度，该怎么办？如果我将宽度和高度设置为355px，它的工作原理是否相同？ – 2014-09-05 05:32:47

是的，但它会在调整大小。既然你有'空白：无环'属性，那么你将不会有任何问题的元素包装到下一行，无论宽度和/或高度 – Devin 2014-09-05 19:21:27

它不适合我。你给我的代码是正确的，但我无法让它与我的代码一起工作。 – 2014-09-05 19:58:04

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

回答

相关问题