Html 带有CSS的流体栅格-非流体

我正在尝试使用

最大宽度：1280px

和

最小宽度：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%;
}

---

我建议将边距设置为.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;
}

---

设置框大小：边框框；将意味着您给元素添加的任何填充都不会影响宽度

CSS使用

而不是

，

作为十进制delimeters；您的

.grid4

和

.grid2

样式需要更新

我还建议使用

clearfix

解决方案，使

.container

元素返回其高度（）

看看这把小提琴：

---

然而，如果你正在寻找一个很好的“开箱即用”的网格系统，我建议你看看它和它们的。

css

使用

而不是
，
作为十进制delimeter:）你的
.grid4
和
.grid2
样式需要更新“以前有人尝试过吗？”-我想这不是你的问题，所以请去掉这个，明确地问你的问题。如果这是你的问题，我会回答“是”。@moose现在更明确了。如果您尝试过，您的解决方案是什么？@haxxxton谢谢：）它现在已经更新。引导网格系统，是我喜欢的很多代码。我喜欢一个简单的代码，据我所知，它现在是为我使用的五列设置的。没问题，为了将来参考，他们的网站上有一个自定义部分，可以让你更改列数（例如，为10）以使其流畅。那么宽度是否可以精确地为ex.20%？
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf{
    *zoom:1;
}