移除浮动:右侧包裹

Question

有没有办法制作流畅的布局,如果浮动元素不适合,它会移动到下一行的左边？这是我想要实现的目标的图片:

如果绿色元素和右元素都有空间,则红色元素会浮动到右侧.

如果没有足够的空间(绿色元素很长,或者屏幕太小),红色元素应该包裹并将其自身对齐到左侧.

这就是我现在所拥有的:小提琴

如您所见,绿色元素在包装后保持与右侧对齐.

码:

<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

您可以通过将子 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;
}

.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 {
    background: lightblue;
    padding: 5px;
    margin-bottom: 5px;
}
.wrap {
    width: 200px;
    text-align: justify;
}
.wrap div {
    vertical-align: top;
    display: inline-block;
    text-align: left;
}
.red {
    background: salmon;
}
.green {
    width: 80px;
    background: lightgreen;
}
.wrap::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden;
}