将 HTML 页面分成两个或多个部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14492237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Divide HTML page into two or more sections
提问by kalpetros
How can I divide a webpage into two sections or more? For example I want to put some pictures on the left side and a contact form on the right side. I can't find a way to do it. I tried to do it using div but it didn't work. Below is a sample code of what I'm trying to do.
如何将网页分成两部分或更多部分？例如，我想在左侧放一些图片，在右侧放一个联系表。我找不到办法做到这一点。我尝试使用 div 来做到这一点，但没有奏效。下面是我正在尝试做的示例代码。
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="page">
<div class="header">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li class="selected"><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="body">
<div id="pictures">
<h1>Picture</h1>
</div>
<div id="contacform">
<h1>
<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</h1>
</div>
</div>
<div class="footer">
<p>Test Footer</p>
</div>
</div>
</body>
采纳答案by Phil.Wheeler
I'm not going to pick apart all of the CSS you should be using so the following code sample shows you how to split two div tags apart evenly. Please don't use #id selectors in your css because it kills kittens.
我不会挑选出您应该使用的所有 CSS，因此以下代码示例向您展示了如何将两个 div 标签平均分开。请不要在您的 css 中使用 #id 选择器，因为它会杀死小猫。
Your HTML:
你的 HTML：
<div class="body">
<div id="pictures" class="column half>
<h1>Picture</h1>
</div>
<div id="contactform" class="column last>
<h1>
<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</h1>
</div>
</div>
The CSS:
CSS：
.body { overflow: hidden; }
.column { float: left; }
.half { width: 50%; }
.last { float: none; width: auto; }
I recommend reading about CSS grid systems.
我推荐阅读 CSS 网格系统。
