Question

我在联系页面上浮动有问题。以下是代码。

HTML

<div class="contact">
    <form class="form" method="post" action="">
        <table>
            <tr>
                <td class="contact-firstcol">
                    <label for="name">Name</label>
                </td>
                <td class="contact-secondcol">:</td>
                <td class="contact-thirdcol">
                    <input type="text" name="name" id="name" />
                </td>
            </tr>
            <tr>
                <td class="contact-firstcol">
                    <label for="email">Email</label>
                </td>
                <td class="contact-secondcol">:</td>
                <td class="contact-thirdcol">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="contact-firstcol">
                    <label for="phone">Phone</label>
                </td>
                <td class="contact-secondcol">:</td>
                <td class="contact-thirdcol">
                    <input type="text" name="phone" id="phone" />
                </td>
            </tr>
            <tr>
                <td class="contact-firstcol">
                    <label for="topic">Topic</label>
                </td>
                <td class="contact-secondcol">:</td>
                <td class="contact-thirdcol">
                    <div class="styled-select select">
                        <select class="dropdown">
                            <option value="generalQuestion">General Question</option>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="contact-firstcol">
                    <label for="message">Message</label>
                </td>
                <td class="contact-secondcol">:</td>
                <td class="contact-thirdcol">
                    <textarea id="message" name="message"></textarea>
                </td>
            </tr>
            <tr>
                <td class="contact-firstcol"></td>
                <td class="contact-secondcol"></td>
                <td class="contact-thirdcol">
                    <input type="reset" name="reset" value="CLEAR" />
                    <input type="submit" name="submit" value="SUBMIT" />
                </td>
            </tr>
            <table>
    </form>
</div>
<div class="aside">
    <p>Email</p>
    <p>Telephone</p>
    <p>Address</p>
</div>

CSS

.contact {
    float:left;
    width:68%;
    margin:20px 0 0 0;
    padding:10px;
}
.aside {
    float:left;
    width:27%;
    margin:20px 0 0 0;
    padding:10px;
    background-color:#CECECE;
}
#home-contact p {
    font-family:'alegreya_sansregular';
    letter-spacing:0;
}
table {
    line-height:30px;
    margin:20px;
    display:inline-block;
}
td {
    vertical-align:top;
}
.contact-firstcol {
    font-family:'alegreya_sansregular';
    width:100px;
    font-size:17px;
    color:#999;
}
.contact-secondcol {
    font-family:'alegreya_sansregular';
    width:20px;
    text-align:center;
    font-size:17px;
    color:#999;
}
.contact-thirdcol {
    width:300px;
    color:#999;
}
.form {
    margin-top:20px;
}
.form input, textarea {
    padding: 5px;
    margin: 2px 5px;
    border: solid 1px #E5E5E5;
    outline: 0;
    font: normal 12px/100% Verdana, Tahoma, sans-serif;
    width: 280px;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    max-height:300px;
    resize:none;
}
.form textarea {
    width:280px;
    max-width:280px;
    height:100px;
    max-height:100px;
    line-height:150%;
}
input[type="submit"], input[type="reset"] {
    color:#FFF;
    background:rgba(100, 100, 100, 1);
    border:none;
    width:100px;
    letter-spacing: 1px;
    font-family:'alegreya_sansregular', sans-serif;
    font-size:17px;
    cursor:pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover {
    background:rgba(100, 100, 100, 0.5);
    -o-transition:.5s;
    transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
}
.styled-select select {
    width:293px;
    padding-top:2px;
    color:#999;
    margin-left:5px;
    border:1px solid #CCC;
    height:28px;
    font-size:15px;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
-webkit-appearance: none;

}
.styled-select {
    width: 240px;
    height: 34px;
    overflow: hidden;
    background: url(../images/arrowdown.png) no-repeat right #ddd;
    border: 1px solid #ccc;
}

你能帮忙解决这个问题吗？

我想让.contact和.aside漂浮得很好。但事实证明.aside根本没有浮动，而是留在.contact。

我尝试逐个删除，并且在我删除table标记后发现，它运行良好。但是一旦我插入table标签，它就根本不起作用..

以下是JSFIDDLE让您更清楚地了解。

谢谢！期待收到你的来信！

Answer 1

如果您在jfiddle上调整窗口大小以允许在实际显示器上留出更多空间，您将看到如果您将其设置得足够大，它将按预期向左浮动。我认为问题是你设置的宽度好像没有足够的空间。如果没有足够的空间让元素浮动，它将被放置在另一个元素下面或者“包裹到下一行”。

编辑：道具向pankaj注意到你的桌子关闭标签缺少/（</table>）的清洁度，尽管它没有影响div浮动。

Answer 2

您共享的代码中存在一个小错字。表的结束标记不合适。检查一下。

此外，由于你给出了％age的宽度以及.aside和.contact的一些填充，因此它正在弄乱计算。如果我从.aside（32％宽度）和.contact（68％宽度）中删除填充，div将并排。您可以创建另一个内部div来提供适当的填充。

更新了您的jsfiddle链接 - http://jsfiddle.net/28CEE/1/ 这是修改过的css：

.contact {
    float:left;
    width:68%;
    margin:20px 0 0 0;

}

.aside {
   float:left;
   width:32%;
   margin:20px 0 0 0;
   background-color:#CECECE;
}

Answer 3

您可以尝试这样：LINK

<强> HTML：

<div class="aside">
    <p>Email</p>
    <p>Telephone</p>
    <p>Address</p>
</div>

<div class="contact">... </div>

假设你想要漂浮＆＃34;放弃＆＃34;向右...使用float：right而不是left

Answer 4

添加css类

.form {
 width: 68%;   
float: left;
}

设置接触宽度（宽度：88％;）

close table tag </table>, set a active after form 
    <div class="contact">
            <form class="form" method="post" action="">
            <table>
                <tr>
                    <td class="contact-firstcol"> <label for="name">Name</label> </td>
                    <td class="contact-secondcol"> : </td>
                    <td class="contact-thirdcol"> <input type="text" name="name" id="name" /> </td>
                </tr>

                <tr>
                    <td class="contact-firstcol"> <label for="email">Email</label> </td>
                    <td class="contact-secondcol"> : </td>
                    <td class="contact-thirdcol"> <input type="text" name="email" id="email" /> </td>
                </tr>

                <tr>
                    <td class="contact-firstcol"> <label for="phone">Phone</label> </td>
                    <td class="contact-secondcol"> : </td>
                    <td class="contact-thirdcol"> <input type="text" name="phone" id="phone" /> </td>
                </tr>

                <tr>
                    <td class="contact-firstcol"> <label for="topic">Topic</label> </td>
                    <td class="contact-secondcol"> : </td>
                    <td class="contact-thirdcol">
                        <div class="styled-select select">
                            <select class="dropdown">
                                <option value="generalQuestion"> General Question </option>
                            </select>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="contact-firstcol"> <label for="message">Message</label> </td>
                    <td class="contact-secondcol"> : </td>
                    <td class="contact-thirdcol"> <textarea id="message" name="message"></textarea> </td>
                </tr>

                <tr>
                    <td class="contact-firstcol"></td>
                    <td class="contact-secondcol"></td>
                    <td class="contact-thirdcol"> <input type="reset" name="reset" value="CLEAR" /> <input type="submit" name="submit" value="SUBMIT" /> </td>
                </tr>
            </table>    
            </form>
                <div class="aside">
        <p> Email </p>
        <p> Telephone </p>
        <p> Address </p>
    </div>
        </div>

Answer 5

请务必关闭小提琴中的</table>。您不需要更改表的display属性（将其设置为inline-block）。同样，您可以检查padding属性，使其基于百分比（因此它们与您的宽度单位相匹配）。您也可以将aside float更改为right。

联系页面上的浮动表格（表格不起作用）

5 个答案: