2 列布局未按应有方式显示答案

【问题标题】：2 cloumn layout not displaying as it should2 列布局未按应有方式显示
【发布时间】：2013-10-10 09:33:56
【问题描述】：

我在我的联系表单中添加了 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;
}

谁能告诉我哪里出错了？

谢谢。凯夫

【问题讨论】：

宽度：98%；？？？必须在 48% 左右才能将它们彼此靠近显示
@Vladimir 那是容器...
可能是列内元素的css。它们里面是否有额外的填充或边距会导致堆叠？
这是因为你的后面多了一个
标签。删除它

@KevHopwood 我编辑了它

标签： html css multiple-columns

【解决方案1】：

我发现了我的问题。

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

感谢您的所有帮助。

【讨论】：

【解决方案2】：

您的 HTML 无效。你有太多的结束标签。去掉结束标签后面的就可以了：

见Fiddle

【讨论】：

【解决方案3】：

你有一个与 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>

【讨论】：

【解决方案4】：

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

</div>

here is the fiddle

【讨论】：