保持同一行上的浮动div

如何将两个元素保留在固定右列的同一行中？我想正确的股利与固定的大小，并左列流体，但是当插入长文本向左一个，然后右击一个进入到下一列..保持同一行上的浮动div

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

有什么纯CSS的解决方案？

注意！换行div必须有动态宽度！ 出于演示的目的，它已经固定witdh，所以它会包装。

干杯！

来源

2012-07-12 Kristian

您的包装有一个固定的宽度。你能指望什么？？？或者我错过了什么？溢出？ – PeeHaa 2012-07-12 11:39:29

演示中的包装具有固定宽度，但在我的应用中具有相对宽度（50％）。一个容器大小的变化 – Kristian 2012-07-12 11:47:02

这是你想要做什么的一个常见方式：

.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所以右列位置根据它确定的。

来源

2012-07-12 12:02:04 pacha

这就是我正在寻找的东西！ – Kristian 2012-07-12 12:06:09

你可以做

.left { 
    max-width: 152px; 
}

来源

2012-07-12 11:39:50 32bitfloat

我认为这不会像他的样式表中那样工作，它说包装div的宽度是动态的。 – 2012-07-12 11:43:32

@ 32bitfloat是的，这是为了演示，实际上在我的应用程序中它是50％，所以它的变化 – Kristian 2012-07-12 11:48:01

你有力度的宽度，使用％喜欢

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

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

来源

2012-07-12 11:46:04 Yasser

不错，你没有理解我想要什么，但这种方式时，包装div是500px有很多divs之间的空白 – Kristian 2012-07-12 11:52:00

它比我想象的其实更容易，只是删除浮点数：left;从左边类，并把你的右手上面漂浮着他们的项目在HTML

update fiddle

来源

2012-07-12 11:57:16

工程就像一个魅力！谢谢！ – Kristian 2012-07-12 11:59:06

Sry，更好的解决方案@pacha – Kristian 2012-07-12 12:06:33

这是一个非常流畅的解决方案。然而，当右边一列的高度较短时（可能是也可能不是你想要的），左列（流体一列）的内容可能会在右边一列结束...... – pacha 2012-07-12 12:10:55

这是另一种解决方案。设置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>

来源

2014-04-21 04:58:04 Chloe

保持同一行上的浮动div

回答

相关问题