Question

如何将网页划分为两个部分或更多部分？例如，我想在左侧放置一些图片，在右侧放置一个联系表格。我找不到办法去做。我尝试使用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>

Answer 1

我不打算拆开你应该使用的所有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网格系统。

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

1 个答案: