Question

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

这是我的例子：

在我的示例中，内容不会按比例缩小。相反，当窗口缩小时，网格将会相互低于。

如果有人，有人试过这个，解决方案是什么？

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

带有CSS的流体网格 - 不流畅

2 个答案: