PHP网站的三栏HTML模板答案

【问题标题】：Three-column HTML template for PHP sitePHP网站的三栏HTML模板
【发布时间】：2018-11-20 19:47:55
【问题描述】：

我正在尝试制作一个 HTML 三栏模板，using a layout from html.am。我已将布局用作试验 CSS 和设计的沙箱，现在我想从头开始，而不必依赖其他人设计的模板。

这适用于使用 Twig 作为模板引擎的 PHP/MySQL 站点。内容是从数据库中提取的——它是一个信息网站，在设计上看起来像杂志（因为这是我的目标），它不时更新（不经常），但它不需要完整的博客功能，如评论、上传等，因为它是一个粉丝网站/信息网站，而不是一个拥有大量追随者和大量社交媒体的成熟 WordPress 风格的网站。

This page here是目前影响我的人。

我可以从我的 Firefox 浏览器中保存页面，然后在文本编辑器中手动编辑它，但我正在尝试创建自己的基本设计。

在 Firefox 上使用查看源代码，我注意到上面链接到的页面 [第二个链接] 是由 DIV 组成的，就像第一个示例一样。

我想要做的是在你看到 FIRST DRIVE（根据 Firefox 上的视图源的一个 DIV）的文本之前模拟 div 之间有很多空间的效果，正如你在页面上看到的那样.

对于如何使用 CSS/HTML 正确处理此问题的任何建议，我将不胜感激，这样页面就不会基于使用我修改过的其他模板 - 最近我没有对实际的 HTML/CSS 做太多事情模板。

编辑：

我当前用于现有页面设计的代码（作为纯 HTML，我想从头开始替换，使用修改后的 html.am 编码）：

   <body>		
     <!DOCTYPE html>
    <html>
    	<head>
    <style>
			body {
				margin:0;
				padding:0;
				font-family: Verdana, sans-serif;
				font-size: 13px;
				line-height: 1.5em;
			}
			
			#header {
				background: #ccc;
				height: 100px;
			}
			
			#header h1 {
				margin: 0;
				padding-top: 15px;
			}
			
			main {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 100%;
			}
			
			#nav {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 230px;
				margin-left: -100%;
				background: #eee;
			}
			
			#footer {
				clear: left;
				width: 100%;
				background: #ccc;
				text-align: center;
				padding: 4px 0;
			}
	
			#wrapper {
				overflow: hidden;
			}
						
			#content {
				margin-left: 230px; /* Same as 'nav' width */
			}
			
			.innertube {
				margin: 15px; /* Padding for content */
				margin-top: 0;
			}
		
			p {
				color: #555;
			}
	
			nav ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			
			nav ul a {
				color: darkgreen;
				text-decoration: none;
			}
			
			#container {
			width: 500px;
}

#container img {
height: 399px;
display: block;
margin-left: auto;
margin-right: auto;
}
		
    </style>
    </head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>2 Column Layout &mdash; Left Menu with Header &amp; Footer</title>
    		<header id="header">
    			<div class="innertube">
    				<h1>Header...</h1>
    			</div>
    		</header>
    		
    		<div id="wrapper">
    		
    			<main>
    				<div id="content">
    					<div class="innertube">
    						<h1>Heading</h1>
    						<p></p>
    					</div>
    				</div>
    			</main>
    			
    			<nav id="nav">
    				<div class="innertube">
    					<h3>Left heading</h3>
    					<ul>
    						<li><a href="#">Link 1</a></li>
    						<li><a href="#">Link 2</a></li>
    						<li><a href="#">Link 3</a></li>
    						<li><a href="#">Link 4</a></li>
    						<li><a href="#">Link 5</a></li>
    					</ul>
    					<h3>Left heading</h3>
    					<ul>
    						<li><a href="#">Link 1</a></li>
    						<li><a href="#">Link 2</a></li>
    						<li><a href="#">Link 3</a></li>
    						<li><a href="#">Link 4</a></li>
    						<li><a href="#">Link 5</a></li>
    					</ul>
    					<h3>Left heading</h3>
    					<ul>
    						<li><a href="#">Link 1</a></li>
    						<li><a href="#">Link 2</a></li>
    						<li><a href="#">Link 3</a></li>
    						<li><a href="#">Link 4</a></li>
    						<li><a href="#">Link 5</a></li>
    					</ul>
    				</div>
    			</nav>
    		
    		</div>
    		
    		<footer id="footer">
    			<div class="innertube">
    				<p>Footer...</p>
    			</div>
    		</footer>
    	
    	</body>
    </html>

【问题讨论】：

通过一些代码示例向我们展示您迄今为止尝试和完成的工作。另外，这与php无关。

标签： html css layout

【解决方案1】：

在页面中将#nav_right 放在#nav 之后并给它一个width 类似200px 的东西。然后给margin-right: 200px#content。

【讨论】：