CSS - float：right向下移动元素，不在同一级别

Question

我已经创建了一个容器和三个div。

前两个div在for循环中，数据来自后端（django），并相应地创建div的数量。

正确的div是我想要放置一些元素的地方，这些元素应该处于同一级别，但它位于容器div的最底部。

HTML：

<form method="POST" action="runrobo" name="runrobomain">
    <div id="container_runrobo">
        <div id="runrobo_left"><b>Test Suite Name</b></div>
        <div id="runrobo_center"><b>Order (Priority)</b></div>
        {% for suite_name in data %}
        <div id="runrobo_left">
            <input type="checkbox" name="suite_checkbox" value="{{ suite_name }}">&nbsp;{{suite_name}}
        </div>
        <div id="runrobo_center">
            <input type="text" name="suite_order">
        </div>
        {% endfor %}
        <div id="runrobo_right">
            <b>More Config Options</b>
        </div>
    </div>
</form>

CSS：

#container_runrobo {
    width: 90%;
    margin-left: 1%;
    background-color: lightgray;
    border: 1px solid black;
}

#runrobo_left {
  float: left;
  width: 30%;
  padding: 5px;
  border: 1px solid black;
}

#runrobo_center {
  margin: 0 auto;
  width: 30%;
  padding: 5px;
  border: 1px solid black;
}

#runrobo_right {
  float: right;
  width: 30%;
  border: 1px solid black;
}

现在，经过谷歌搜索后，我在正确的一个之后添加了另一个div：

<div style="clear: both;>&nbsp;</div>

但这也没有解决我的问题。

Answer 1

正如评论中@UncaughtTypeError所建议的那样，在其他两个div之前放置#runrobo_right div解决了这个问题。

所以HTML看起来像：

<form method="POST" action="runrobo" name="runrobomain">
    <div id="container_runrobo">
        <div id="runrobo_right">
            <b>More Config Options</b>
        </div>
        <div id="runrobo_left"><b>Test Suite Name</b></div>
        <div id="runrobo_center"><b>Order (Priority)</b></div>
        {% for suite_name in data %}
        <div id="runrobo_left">
            <input type="checkbox" name="suite_checkbox" value="{{ suite_name }}">&nbsp;{{suite_name}}
        </div>
        <div id="runrobo_center">
            <input type="text" name="suite_order">
        </div>
        {% endfor %}
    </div>
</form>