将两个并排的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。