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

我发现了我的问题。

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

感谢您的帮助。

Answer 2

您的HTML无效。你有太多的结束标签。删除结束标记后的那个，它会没问题：

请参阅Fiddle

Answer 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>

Answer 4

您尚未正确编写代码。额外

</div>

here is the fiddle

2列布局没有显示应该

4 个答案: