黄金比例网页模板？答案

【问题标题】：Golden Ratio Webpage template?黄金比例网页模板？
【发布时间】：2018-10-05 23:52:50
【问题描述】：

我正在尝试创建一个使用黄金比例作为比例的模板网页。但是，看来我做得不对。

我想要一些关于正确使用的建议：

div 用于在页面上布置面板的标签
CSS 和位置属性
任何其他可以帮助我获得有吸引力的页面的标签或提示

HTML：

<html>
<head>
    <title>Golden Ratio</title>
    <link rel="StyleSheet" title="Default" href="gr.css" type="text/css">
</head> 
<body>          
    <div id="header">
    </div>  
    <div>
    </div>
    <div id="bodyleft">
    </div>      
    <div id="bodyright">
    </div>      
    <div id="footer">
    </div>
</body>
</html>

CSS：

body {
    background-color: white;
}

#header {       
    width: 960px;
    height: 100px;
    background-color: red;
}

#bodyleft {
    position: absolute;
    top: 100px; 
    width: 592px;
    height: 700px;
    background-color: blue;
}

#bodyright {
    position: absolute;
    top: 110px;
    left: 610px;
    width: 368px;
    height: 700px;
    background-color: green;
}

#footer {
    position: absolute;     
    top: 800px;
    width: 960px;
    height: 100px;  
    background-color: black;
}

【问题讨论】：

我喜欢this article

标签： html css

【解决方案1】：

我在这篇 Is there a CSS way to position an HTML element vertically following the golden ratio? 的帖子中做了一些相当广泛的黄金比例工作，可能对你有所帮助。

【讨论】：

【解决方案2】：

这是一个链接，http://jsfiddle.net/etienne_carre/WYStC/

我喜欢使用浮动左对齐我的所有 div 并在它后面加上一个 clear 来完成行。

【讨论】：

这是另一个带有包装器的链接，用于将所有内容居中...jsfiddle.net/etienne_carre/WYStC/1

【解决方案3】：

也许这会有所帮助？ https://github.com/gbutiri/phi-grid

它是一个可以和bootstrap一起使用并且使用flexbox的扩展。

【讨论】：