使用 CSS 的流体网格 - 非流体

Question

我正在尝试使用 max-width: 1280px 和 min-width: 950px 制作自己的流体网格。

这是我想要的：http://jsfiddle.net/dmL7A/

这是我的例子：

http://jsfiddle.net/GaFYQ/

在我的示例中，内容不会按比例缩小。 相反，当窗口缩小时，网格将彼此下方。

如果是，是否有人尝试过，解决方法是什么？

#wrapper {
    position: relative;
    margin: 30px auto 0;
    width: 100%;
    max-width: 1280px;
    min-width: 950px;
    background:#999999; 
}

.container {
    margin: 0 -0.915% 10px !important;
}

.col {
    margin:0 0.75%;
    border-bottom: 2px solid #f2f2f2;
    padding-bottom: 10px;
    text-align: center;
    float: left;
    position:relative;
    max-height: 320px
}

.container .col img {
    width: 100%;
}

.grid2 {
    width:18,75%;
}

.grid4 {
    width:39,1%;
}

.grid6 {
    width:60%;
}

.grid8 {
    width:80%;
}

.grid10 {
    width:100%;
}

Answer 1

我建议将边距设置为 .col 为 0。具有 0.75% 的边距将根据列的宽度为您提供不同的边距。

将列大小更改为：

 .grid2 {
    width:20%;
}

.grid4 {
    width:40%;
}

.grid6 {
    width:60%;
}

.grid8 {
    width:80%;
}

.grid10 {
    width:100%;
}

要在列之间留出一点间距，请将以下内容添加到 .col 类中

.col {
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     padding:0 10px;
}

设置 box-sizing:border-box;将意味着您对元素的任何填充都不会影响宽度。

Answer 2

CSS 使用. 而不是, 作为十进制分隔符；您的.grid4 和.grid2 样式需要更新。

我还建议使用clearfix 解决方案来使您的.container 元素恢复其高度（http://nicolasgallagher.com/micro-clearfix-hack/）。

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf{
    *zoom:1;
}

看看这个小提琴：http://jsfiddle.net/GaFYQ/4/

但是，如果您正在寻找一个出色的“开箱即用”网格系统，我建议您查看 Twitter Bootstrap 和他们的 Grid System。