保持浮动div在同一行 [英] Keep floating divs on same line

问题描述

如何将两个元素保留在固定右栏的同一行中？
我想要右边的div是固定大小，左列流畅，但当插入长文本到左边一个，然后右边一个到下一列..

How do i keep two elements in the same row with fixed right column? I want right div to be with fixed size, and left column fluid, but when in insert long text to left one, then right one goes to the next column..

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

有没有纯CSS解决方案？

Is there any pure CSS solutions?

注意！ Wrap div必须有动态宽度！
对于demostration目的，它有固定的witdh，所以它会wrap。

NB! Wrap div must have dynamic width! For demostration purposes it has fixed witdh, so it will wrap.

干杯！

推荐答案

您想要：

.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（正确位置）的绝对位置


• wrap div 被分配 position：relative ，因此右列位置根据它确定。

• The fluid left column fills the whole width but saves space for the right column with margin-right: [right column width];
• The fixed right column is placed at an absolute position at top 0, right 0 (its correct place)
• The wrap div is assigned position: relative so the right column position is determined according to it.

这篇关于保持浮动div在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！