html - 删除 float : right on wrap

Question

有什么方法可以制作流畅的布局，如果 float 元素不适合，它会移动到下一行的左侧？这是我要实现的目标的图片:

如果绿色元素和右侧元素都有空间，则红色元素向右浮动。

如果没有足够的空间(绿色元素太长，或者屏幕太小)，红色元素应该环绕并向左对齐。

这是我目前拥有的:fiddle

如您所见，绿色元素在环绕后保持向右对齐。

代码:

<div class="wrap">
    <div class="red">long long long long text</div>
    <div class="green">needs to align to the left</div>
</div>

.red {
    display: inline-block;
    border-color: red;
}
.green {
    float: right;
    width: 80px;
    border-color: green;
}

Answer 1

评论

我给出的这个答案不适用于花车。相反，我正在使用更现代的 CSS3 解决方案 ( so watch out with browser compatability )，使用 display:flex。 Flex 还为将来的编辑提供了更多简单的选项。它还将一行上所有 div 的高度调整为相同的高度，并且可能还有一些东西 ^^。

JSFiddle (resize the width in JSFiddle to see the effect)

HTML

<div class="wrap">
    <div class="red">long long long long text</div>
    <div class="green">needs to align to the left</div>
</div>

CSS(阅读评论)

    div {
       border: 3px solid blue;
       padding: 5px;
    }
    .wrap {
        display: flex;/*create a flexbox (style it like a block item)*/
        display: -webkit-flex; /* Safari */
        flex-wrap: wrap;/*items in the flexbox will drop down when they do not fit this div*/
        -webkit-flex-wrap: wrap; /* Safari 6.1+ */
        justify-content: space-between;/*spaces content on a row keeping an item on the 
    right and one on the left and creating empty space inbetween unless the next item fits 
    in this space in which case the browser will do that (same effect as float: left, only 
    with a better transition)*/
        width: 50%;
        border: 3px solid blue;
        padding: 5px;
    }
    .red {
        border-color: red;
        flex: 0 1 180px;/*all you need to know here is that the 3th value is the width 
    of the item*/
        -webkit-flex: 0 1 180px; /* Safari 6.1+ */
        -ms-flex: 0 1 180px; /* IE 10 */

    }
    .green {
        border-color: green;
        flex: 0 1 100px;/*all you need to know here is that the 3th value is the width
    of the item*/
        -webkit-flex: 0 1 100px; /* Safari 6.1+ */
    -ms-flex: 0 1 100px; /* IE 10 */
}