html - 保持 float div 在同一行

Question

如何将两个元素保持在同一行且右列固定？我希望右边的 div 具有固定大小，而左边的列是流动的，但是当在左边插入长文本时，右边的会转到下一列..

示例:http://jsfiddle.net/Jbbxk/2/

有没有纯CSS解决方案？

注意!包裹 div 必须具有动态宽度!出于演示目的，它已固定 witdh，因此它会换行。

干杯!

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];
为右列节省了空间
• 固定右列放在绝对位置top 0, right 0(它的正确位置)
• wrap div 被分配了 position: relative 所以右边的列位置是根据它来确定的。