logo标签列表

将HTML页面分成两个或更多部分

html
4

如何将网页分成两个或更多部分？例如，我想在左侧放一些图片，在右侧放一个联系表格。我试过使用 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>

1
请展示一些你已经尝试过的代码。 - Adam
我已经用代码更新了描述。 - kalpetros
1个回答
3
我将为您翻译以下内容：

我不会逐一分析应该使用的所有CSS，因此以下代码示例向您展示如何平均拆分两个div标签。请不要在CSS中使用#id选择器，因为它会杀死小猫。

您的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>

这是CSS：

.body { overflow: hidden; }
.column { float: left; }
.half { width: 50%; }
.last { float: none; width: auto; }

我建议阅读一下CSS网格系统。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接