CSS-浮动：右移元素，不在同一级别

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在注释中所建议的那样，将#runrobo_right div放在其他两个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>