html - 对齐两个并排的 div 搞砸了下表

Question

我有两个并排的div。我想将一个的内容向左对齐，另一个的内容向右对齐。左侧正确对齐，但是当我对齐右侧时，它会弄乱下面的输入表。（见图）

这个

可悲地变成

这个

我觉得这可能是一个非常简单的问题，但我就是想不通，尽管我发誓我以前做过。

这是 html （我在其中删除了一些 php 循环，因为我怀疑它是否相关，但如果你认为它是相关的，请告诉我）：

    <div class='uppertitle'>
        <div class='question'><h4>What does {$business['name']} aim to achieve within the next three months?</h4></div>
        <div class='addRow'><input type="button" value="Add Goal" onclick="addRow('threemonths')" /></div>
    </div>
    <div class='goals_table'>
    <table id="threemonths" class= 'milestones' width="350px" border="1">

        <tr>
            <td class= 'deleteRow'><input type="button" name="Delete" onClick="newDelete(this);"/> </td>
            <td><input type="text" name="txt[]" value='{$goal['description']}'/><input type="hidden" name="type[]" value='threemonths'></td>
        </tr>

    </table>
    </div>

这是CSS：

.addRow {
    float: right;
    display: inline;
}

div#goals .question {
    float: left;
    margin-left: 40px;
    display: inline;
}

.goals_table {
    display: block;
}

可以在此处找到该元素的示例：https ://dl.dropboxusercontent.com/u/11993667/Hosting%20Signup%20%7C%20%7C%20Page%2010.html

提前致谢。

Answer 1

您将需要在桌子上使用这个 CSS。

clear: both

clear 将防止项目坐在left或元素right的both侧面。