-1

お問い合わせフォームに 2 列のレイアウトを追加しました。

唯一のことは、2 列ではなく 1 列で表示されることです。

私のhtmlは：

<div id="container">
    <div id="column1">
        <h1>You can talk to me. I don't bite...</h1></div><br><br>
        <h5>You can contact me by the form opposite or by one of the following:</h5><br><br>
        <img src="/icons/mail.png" name="mail">kevin@kh.co.uk
    </div>
    <div id="column2">
        <form action="mail.php" method="POST">
            <p>Name*</p> <input type="text" name="name">
            <p>Your Company Name</p> <input type="text" name="name">
            <p>Email*</p> <input type="text" name="email">
            <p>Telephone*</p> <input type="text" name="email">
            <p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
            <small>Fields marked with a * symbol are required. </small>
            <input type="submit" value="Send"><input type="reset" value="Clear">
        </form>
    </div>
</div>

私のcssは次のとおりです。

#container {
    float: left;
    width: 98%;
    position:relative;
}
#column1, #column2 {
    width: 50%;
    float: left; 
    position:relative;
}

誰かが私がどこで間違っているのか教えてください。

ありがとうございました。ケブ

4

4 に答える 4

0

H1 と同じ行に終了 div タグがありますが、そこにあるはずがないので削除します。

このフィドルをチェックしてくださいhttp://jsfiddle.net/WT6zC/

    <div id="container">
<div id="column1">

<h1>You can talk to me. I don't bite...</h1><br><br>
<h5>You can contact me by the form opposite or by one of the following:</h5><br><br>
<img src="/icons/mail.png" name="mail">kevin@kh.co.uk

</div>
<div id="column2">
<form action="mail.php" method="POST">
<p>Name*</p> <input type="text" name="name">
<p>Your Company Name</p> <input type="text" name="name">
<p>Email*</p> <input type="text" name="email">
<p>Telephone*</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<small>Fields marked with a * symbol are required. </small>
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</div>
</div>
于 2013-10-10T09:40:49.770 に答える
0

コードを正しく記述していません。追加

</div>

ここにフィドルがあります

于 2013-10-10T09:40:55.203 に答える
0

問題が見つかりました。

の終了 div タグ<div id="column1">が、列 1 のコンテンツの最後にありませんでした。

ご助力いただきありがとうございます。

于 2013-10-10T09:39:50.800 に答える
0

HTML が無効です。終了タグが多すぎます。終了タグの後のものを削除すると問題ありません。

フィドルを見る

于 2013-10-10T09:40:15.200 に答える