Question

我不擅长float，所以我会很感激任何详细的答案，不过我（以及客户）会很乐意快速修复。

我有以下结构。（我删掉了我认为无关紧要的部分，但复制了问题底部的整个div）。这是一个更大的div，其宽度可由用户调整。

<div style="height: 16px; top: 0px; left: 0px; right: 0px; overflow: hidden;">
    <div class="icon ui-icon ui-icon-triangle-1-e"></div>
    <div>
        <div style="white-space: nowrap; overflow: hidden; position: relative; text-overflow: ellipsis;float: left;">Really long title txt</div>
        <div style="float: right; white-space: nowrap; overflow: hidden; position: relative; font-size: x-small; padding-right: 5px;">
            <i>extra information 1</i>
        </div>
    </div>
</div>

我需要行为：

第二个div需要在面板展开时保持在右侧
如果面板太小而无法完整显示，则第二个div需要完全消失。
如果面板太小，第一个div需要自动省略。

如果我从第一个div中删除float，则第二个div似乎完全消失了。（Chrome的开发工具显示其基线几乎低于线的其余部分，因此会被剪裁。）但是，如果我缩小面板，第一个div会正确地自动省略。

如果我将float留在第一个div中，则第二个div正确显示，并在面板太小时正确消失。然而，第一个div然后向下移动，因此它的基线低于线的其余部分（并且大部分被剪裁，并且仍然显示图标，因此看起来很糟糕）。

问题：为什么它会以这种方式运行，我该怎么做才能让它按照我需要的方式运作？

这是完整的div，以防我上面提供了太多信息：

<div class="TreeViewNodeGroup ui-state-active ui-icon-check" unselectable="on" style="height: 16px; top: 0px; left: 0px; right: 0px; overflow: hidden;">
    <div class="icon ui-icon ui-icon-triangle-1-e" aria-hidden="false" style="border: 0px solid blue;"></div>
    <div class="icon" aria-hidden="true" style="border: 0px solid green; display: none;"></div>
    <div class="icon" aria-hidden="true" style="border: 0px solid red; display: none;"></div>
    <div>
        <div unselectable="on" style="border: 0px transparent; white-space: nowrap; overflow: hidden; position: relative; text-overflow: ellipsis;float: left;">Really long title txt</div>
        <div unselectable="on" class="rangeDiv" style="border: 0px transparent; float: right; white-space: nowrap; overflow: hidden; position: relative; font-size: x-small; padding-right: 5px;">
            <i>extra information 1</i>
        </div>
    </div>
</div>

Answer 1

我的同事提出了修复方案。问题出在div之前的图标中。他们需要删除float，并将position设置为绝对值。我们在第一个元素上设置margin-left：

<div class="TreeViewNodeGroup ui-state-active ui-icon-check" unselectable="on" style="height: 16px; top: 0px; left: 0px; right: 0px; overflow: hidden;">
    <div class="icon ui-icon ui-icon-triangle-1-se" aria-hidden="false" style="border: 0px solid blue; position: absolute;"></div>
    <div class="icon" aria-hidden="true" style="border: 0px solid green; display: none; position: absolute;"></div>
    <div class="icon" aria-hidden="true" style="border: 0px solid red; display: none; position: absolute;"></div>
    <div>
        <div unselectable="on" style="border: 0px transparent; float: left; white-space: nowrap; overflow: hidden; position: relative; margin-left: 15px;">Really long title txt</div>
        <div unselectable="on" class="rangeDiv" style="border: 0px transparent; float: right; white-space: nowrap; overflow: hidden; position: relative; font-size: x-small; padding-right: 5px;">
            <i>extra information 1</i>
        </div>
    </div>
</div>

将2个div放在同一个div中，左边是一个自动省略号，右边一个是右浮点数

1 个答案: