Question

假设我有1000 px宽2列布局，100 px天沟空间（边距）和左右50px ..如何将黄金比例应用于此布局？

方法一

c1+c2=800px;
c1/c2=1.618;
=>c1= 495px and c2= 305px

50px, column 1 (495px), 100px, column 2 (305px), 50px

方法二计算列宽，忽略边距。

c1+c2=1000px
c1/c2=1.618

=>c1= 618px c2=392px

添加边距/填充后的有效列宽

c1=618px -100px = 518px
c2=392px -100px = 292px
50px, column 1 (51), 100px, column 2 (305px), 50px

% difference in two methods 518-495/518= 4%

4％的差异不会产生任何差异，但在处理狭窄的布局时，％差异会更大。

在第一个例子中，他们从黄金比例中取出填充物，而在另一个例子中，他们将填充物作为GR的一部分。

有人可以建议哪种方法更好。

我正在为可自定义的wordpress主题开发此布局，我提供了一个选择流体布局的选项。我不能使用黄金比例的第一种方法（Can I ??）。

我可以使用方法2而不会失去GR为设计带来的和谐。

请包含链接并参考支持您的答案。

PS：我之前在平面设计部分发过这个问题，我建议在这里发布。我希望我没有违反任何规则。

Answer 1

我可以向你们指出这篇关于黄金比例的精彩文章：

它还包含一个有用工具的链接，用于根据黄金比率和另外两个比率计算数字。这是方便的链接：

Answer 2

在您的两个列div上使用它们：

.golden-ratio-horizontal-primary {
    flex: 1.618;
    // or width: 62%;
}
.golden-ratio-horizontal-secondary {
    flex: 1;
    // or width: 38%;
}