html - 2 cloumn 布局未按应有的方式显示

Question

我在我的联系表单中添加了 2 列布局。

唯一的问题是它不会显示在 2 列中，而是显示在单列中。

我的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;
}

请问有人能告诉我哪里出错了吗？

谢谢你。凯夫

Answer 1

您的 HTML 无效。你有太多的结束标签。删除结束标签后的那个就可以了：

见小提琴

Answer 2

你在 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>

Answer 3

您没有正确编写代码。额外的

</div> 

这是小提琴

Answer 4

我发现了我的问题。

我的结束 div 标记<div id="column1">不在我的第 1 列内容的末尾。

感谢你的帮助。