Html 移除浮子：在包裹上的右侧

有没有办法制作一个流体布局，如果浮动元素不适合，它会移动到下一行的左侧？以下是我试图实现的目标：

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

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

这就是我目前拥有的：

如您所见，绿色元素在包装后保持向右对齐

代码：

长文本
需要向左对齐
瑞德先生{
显示：内联块；
边框颜色：红色；
}
格林先生{
浮动：对；
宽度：80px；
边框颜色：绿色；
}

您可以通过将子div视为内部元素，然后对齐/输出父div的内容来实现这一点，如。将该问题的解决方案转化为：

.wrap {
    text-align: justify;
}
.wrap div {
    vertical-align: top;
    display: inline-block;
    text-align: left;
}
.wrap::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden;
}

div{
背景：浅蓝色；
填充物：5px；
边缘底部：5px；
}
.包裹{
宽度：200px；
文本对齐：对齐；
}
.包裹部{
垂直对齐：顶部；
显示：内联块；
文本对齐：左对齐；
}
瑞德先生{
背景：鲑鱼；
}
格林先生{
宽度：80px；
背景：浅绿色；
}
.wrap：：之后{
宽度：100%；
显示：内联块；
内容：“.”；
可见性：隐藏；
}

短文
需要向右对齐
长文本
需要向左对齐
下一个元素

注释

    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 */
}

我给出的这个答案不适用于浮动。相反，我使用更现代的CSS3解决方案（），使用display:flex。Flex还为将来的编辑提供了更简单的选项。它还将一行上所有div的高度调整为相同的高度，可能还有一些其他内容^^

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 */
}