文本溢出浮动里面的div的div可调整大小的DIV中

Question

里面一个jQuery可调整大小的div我有很多行的div，并且在每行有一个左右浮动股利。当可调整div小于两个浮动div时，我希望左浮动div使用文本溢出：省略号。正确的漂浮潜水应保持相同的大小。正如另一个问题所建议的，我尝试给左边的div一个右边距，但似乎忽略了可调整大小的div。

这里是我的目标的例子：

全尺寸行：

left div  right div 

行调整为较小的宽度：

lef... right div 

HTML：

<div resizable> 
    <div class="row"> 
     <div class="floatleft">test1 hello</div> 
     <div class="floatright">test2 hello</div> 
    </div> 
    <div class="row"> 
     <div class="floatleft">test3 hello</div> 
     <div class="floatright">test4 hello</div> 
    </div> 
</div> 

CSS ：

div[resizable] { 
    border: 1px solid Black; 
    width: 50%; 
} 

.floatleft { 
    float: left; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    margin-right: 10px; 
} 

.floatright { 
    float: right; 
    white-space: nowrap; 
} 

.row { 
    overflow: hidden; 
} 

小提琴（使用angularjs但不要担心）：如果

http://jsfiddle.net/dfjrp8h5/1/

奖励积分可以解释为什么浮动DIV右边距不起作用。谢谢！

Answer 1

为什么你float:left左<div>？首先代码必须正确<div>与float:right。左侧块必须有overflow:hidden清除。

HTML：

<div resizable> 
    <div class="row"> 
     <div class="floatright">test2 hello</div> 
     <div class="floatleft">test1 hello</div> 
    </div> 
    <div class="row"> 
     <div class="floatright">test4 hello</div> 
     <div class="floatleft">test3 hello</div> 
    </div> 
</div> 

CSS：

.floatleft { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.floatright { 
    float: right; 
    white-space: nowrap; 
    margin-left:10px; 
} 

DEMO

margin-right浮动<div>做工精细。

Answer 2

我改变你的CSS一点，它的工作原理。只需在下面更改Fiddle中的CSS即可。

div[resizable] { 
border: 1px solid Black; 
width: 50%; 
} 

.floatleft { 
float: left; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
width:50%; 
} 

.floatright { 
    float: right; 
    white-space: nowrap; 
    width:50%; 
    text-align:right; 
} 

.row { 
    overflow: hidden; 
}