4

Webページを2つ以上のセクションに分割するにはどうすればよいですか？たとえば、左側にいくつかの写真を配置し、右側に連絡フォームを配置したいと思います。私はそれをする方法を見つけることができません。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をすべて選択するわけではないので、次のコードサンプルは、2つの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 に答える