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>

4

1 回答 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 网格系统。

于 2013-01-24T02:01:11.213 回答