CSS 左对齐、右对齐和重复中间对齐

Question

我有一个 .png 用于左侧和右侧，第三个在窗口的(未知)宽度上重复。

#wrap{
    width: 100%;
    height: 10px;
}
#a{
    float: left;
    background-color: #800000;
    width: 10px;
    height: 10px;
}
#b{
    background-color: #008000;
    margin-left: 10px;
    margin-right: 10px;
    height: 10px;
}
#c{
    float: right;
    background-color: #000080;
    width: 10px;
    height: 10px;
}

<div id="wrap">
    <div id="a">
    </div>
    <div id="b">
    </div>
    <div id="c">
    </div>
</div>

像这样，float: right 元素可以说是在第二行。

如果我将 display: inline(或 ~-block)添加到中间元素，它不会显示，但左/右没问题。

怎么了？

Answer 1

float 元素必须放在 HTML 代码中的非 float 内容之前，即使它们 float 在右侧也是如此。因此，在 HTML 中将#c 放在#b 之前。