Question

在jquery可调整大小的div中，我有许多行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/

如果你能解释为什么浮动右边距不起作用，那么

奖励积分。谢谢！

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;
}

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

2 个答案: