Question

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

enter image description here

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

如果没有足够的空间（绿色元素很长，或者屏幕太小），红色元素应该包裹并将其自身对齐到左边。

这就是我目前所拥有的：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

您可以将子div视为内部元素，然后对父div进行对齐/填充，例如done here。为此问题翻译该解决方案会导致：

.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;
}

＆＃13;

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

＆＃13;

<div class="wrap">
    <div class="red">short text</div>
    <div class="green">needs to align to the right</div>
</div>
<div class="wrap">
    <div class="red">long long long long text</div>
    <div class="green">needs to align to the left</div>
</div>
<p>Next element</p>

＆＃13;

Answer 2

<强>评论

我给出的这个答案与浮动无关。相反，我使用display：flex来使用更现代的CSS3解决方案（so watch out with browser compatability）。 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 */
}

移除浮动：右侧包裹

2 个答案: