html - CSS - float : right moves element down, 不在同一级别

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 :

<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>