如何使用16列响应网格与20px天沟

我已经尝试了很多网格从骨架到金色和bootstrap，但我无法找到更好的解决方案。接近的是网格包。但我不想要任何列边距。你可以让我知道什么是更好的方式来做到这一点。例如。我想用6col浮动div 10 col ...与12 col我尝试了8col与4col和7col与5col ..但我没有得到PSD的确切宽度。如何使用16列响应网格与20px天沟

你可以看到我添加了psd的屏幕截图。 enter image description here

感谢

PS。我没有附加任何代码，因为我很困惑。所以请不要投票。我只需要一个建议或小型演示

来源

2013-12-15 San

列PSD中的宽度可能无法很好地计算。你不应该坚持要像素完美。设计师不应该指望它。设计师可能会想到这个问题。阅读此：http://webdesign.about.com/od/webdesignbasics/a/aa061807.htm – HerrSerker

@HerrSerker：我知道，但我只是想接近它。你可以看到附带的psd截图。我只是想知道如果16 col是10再见6我如何使用它12 col .. 5x7或8x4 ..im坚持在这 – San

如果设计基于16列网格，您应该使用16列网格在你的实现中。这是您或设计师在开始设计之前所做的设计决定，您应该坚持下去。事后改变这是一件乏味的事情。 – HerrSerker

网格很简单。

为什么你可能会稍微感到困惑的原因是人们使用固定和流体网格，流体以百分比和固定的像素通常设置。

，使用固定的只是创建一个容器大小，你将在浏览器中，以便中央开始，

.container { 
    width:960px; 
    margin: 0 auto; 
}

除以960像素每列

10 = 96PX在CSS中，为每个类网格尺寸使用公式96 * 1，96 * 2，一路10

grid_1 { width: 96px; } 
grid_2 { width: 192px; } 
grid_3 { width: 288px; } 
grid_4 {...}

然后应用类在HTML所以

元件个

<div class="logo grid_3"></div> 
<div class="nav grid_7"></div>

大多数网格系统还使用了“前缀”和“后缀”与边缘涂敷，其推或拉元素的左侧或右侧，当你不希望出现这种需要是grid_3的容器，但你有由于间距，使grid_7。

电网在创造视觉上的平衡，也为我们提供了一种方式，开发/设计奠定了内容更伟大。

流体格略有不同，我想包你的头附近首先被固定。

[编辑]你应该使用什么是设计。使用（后缀和前缀）等我解释推并在页面上拉元件，所以使用（suffix_1）作为推动右侧元件远离创建在设计中的柱的间隙的一种方式，这同样适用于preffix_1

来源

2013-12-15 14:32:10 RustyCollins

如何使用16列响应网格与20px天沟

回答

相关问题