Question

如何将两个元素保持在固定右列的同一行中？我希望右边的div具有固定的大小，并留下柱流体，但是当插入长文本到左边一个时，然后右边的一个进入下一列...

有没有纯CSS解决方案？

NB！换行div必须具有动态宽度！ 为了演示目的，它已经修复了，所以它将包装。

干杯！

Answer 1

这是做你想做的事情的一种常见方式：

.wrap {
    position: relative;
    margin: 5px;
    border: 1px solid red;
}
.left {
    float: left;
    background-color: #CCC;
    margin-right: 48px;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background-color: #888;
}

说明：

流体左列填充整个宽度，但使用margin-right: [right column width];
固定的右栏位于前0位，右0位（正确位置）的绝对位置
换行div 被指定为position: relative，因此根据它确定正确的列位置。

Answer 2

它实际上比我想象的要容易，只需移除浮子：左;从左侧的类中，将正确的浮动项放在HTML上面

update fiddle

Answer 3

这是另一种解决方案。设置display: table-cell;

http://jsfiddle.net/Jbbxk/54/

.left {
    /*display: left;*/
    display: table-cell;
}
.right {
    float: right;
    display: table-cell;
}

此外，浮动div首先出现：

<div class="right">
    &nbsp;
</div>
<div class="left">
    Looooooooong content - pushes right to next row<br>
    NOT OK
</div>

Answer 4

你可以做到

.left {
    max-width: 152px;
}

Answer 5

因为你有动态宽度，所以使用％like

.left {
float: left;
background-color: #CCC;
width:75%;
}

我更新了小提琴链接：http://jsfiddle.net/Jbbxk/6/

将浮动div保持在同一行

5 个答案: