可调整大小的 div 内的 div 内的文本溢出浮动 div

Question

在 jquery 可调整大小的 div 内部，我有许多行 div，并且在每一行中都有一个左右浮动 div。当可调整大小的 div 小于两个浮动 div 时，我希望左侧浮动 div 使用 text-overflow:ellipsis 。正确的浮动潜水应该保持相同的大小。正如另一个问题中所建议的那样，我尝试给左 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;
}