布局百分比与填充

Question

我有一个有趣的问题不止一次出现过。我将展示最后一个并将它们上传到我的服务器。

我正在采取关于响应式网页设计的tuts +课程，因为这个人已经设置了20％用于创建5个网格+ 2x5px填充它们之间，除非我将20改为19％，否则它对我不起作用。

这是我的代码：

/* WIDTH SETTING */

.nav-hold,
.image-grid,
.container {
    width:95%;
    max-width:1000px;
    margin:0 auto;
}

/* IMAGE GRID */
.image-grid,
.form-container {
    overflow: hidden; /* because inside the grid, we'll flow elements */
    padding: 5px;
}

.image-grid-square {
    float: left;
    width: 19%; /* each img container's width (5*)19% */
    overflow: hidden; /* because inside the grid, we'll flow elements */
    padding: 5px;
}

.image-grid-square img {
    width: 100%; /* the img inside the container can be 100% big */
    float: left;
}

他的代码中唯一的变化是宽度：20％; （至少我注意到了）

如果你们想更深入地检查代码，这是我的版本：http://purpost.me，这是他的版本：http://purpost.me/tuts

为什么他的5个网格的20％或4个网格的25％工作完美，而我的不是？ :)我正在学习CSS并且花费很少的时间来了解它在大项目中使用它的大部分时间。我想了解布局的行为，以便能够构建任何类型的网站。我知道像Bootstrap这样的框架，但命令是使用我们自己的代码，所以我尽可能快地学习。 :)

在课程中300x300的图片变成了188x188，但是当我用20％的图片尝试时，我的200x200 ...现在19％的190x190。我不明白。

我理解响应式网页设计的大部分关键因素，除非这个网格问题。我认为我应该阅读很多关于它的尝试并尝试尝试，最后我会习惯使用它。

我感谢任何帮助，提前谢谢！

Answer 1

其他人有reset.css文件，他有一些你没有使用的CSS定义。这就是你的用户界面表现不同的原因。