如何将两个 div 并排放置，其中左侧的 div 大小适应其内容，而右侧的 div 占据剩余空间？

Question

我正在尝试按照以下条件将两个 div 放置在一起：

1. 这两个 div 必须在同一行上。
2. 左侧 div 应该优先显示，尽可能显示更多文本，直到溢出时使用省略号。
3. 右侧 div 的文本应该右对齐。如果溢出，应使用省略号。
4. 文本是动态的，因此不能使用百分比或固定宽度。
5. 仅需要在基于 webkit 的浏览器中工作，因此首选 CSS3 解决方案。

以下是一些演示图片：

输入

<div class='left'>I should always fit. If not, ellipsis should be used.</div><div class='right'>Right align and fit me if space available here.</div>

输出

输入

<div class='left'>I should always fit. If not, ellipsis should be used. And some more text and more, and more text.</div><div class='right'>Right align and fit me if space available here.</div>

输出

输入

<div class='left'>This text is left aligned.</div><div class='right'>This text is right aligned.</div>

输出

- Philip Murphy

Answer 1

除了右对齐的文本会吃掉空白空间之外，我已经解决了这个问题。您没有将其列为要求，因此我不确定是否只是您所绘制的方式？示例链接：http://jsfiddle.net/mdares/fSCr6/

HTML：

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, and then: </div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, Some Text, Repeat, Repeat, Repeat, ,Some Text,</div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, </div>
    <div class="right">other Text ttt</div>
</div>

CSS：

.container {
    width: 600px;
}
.left {
    max-width: 100%;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    float: left;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    text-align: right;
}

最后：

- Matthew

---

嗨，马修，看起来非常不错。我可以在它们之间添加一个单独的空格字符来解决你提到的空格问题。由于我不想使用固定宽度，所以我已经在容器元素上测试了没有"width: 600px"的情况，它似乎运行得很好。在Chrome中完美运行，但是在Safari中，当右侧div被完全推出视图时（即右侧div）会换到下一行。有可能修复这个问题吗？ - Philip Murphy

容器只是为了模拟将包含这两个div的任何东西 - 即并不意味着它是解决方案的一部分，只是模拟这些所在页面。至于Safari - 我想我已经在工作中安装了它，并会尝试查看那里的情况。 - Matthew

好的 - 已复制。我没有看到它，因为只有当容器没有固定大小（数字）时才会发生。并且只有在调整大小时（刷新后会再次正确显示）。现在正在尝试解决这个问题。 - Matthew

好的 - 尝试了几种方法，我没有找到任何只使用CSS来处理窗口调整大小而不需要容器固定大小的方式。如果页面开始比左侧div的宽度小，那么在Safari中对我来说是可以工作的。你可以使用类似以下的JS代码来实现：$(window).resize(function(){ $('#right').width($(window).width() - $('#left').width()); }); - Matthew

尝试在div上使用word-break属性，并在容器上使用white-space属性设置为no-wrap。 - Anobik

Answer 2

除了容器宽度可以在此以百分比定义外，这里有一个解决方案。唯一有效的方法是将容器背景设置为子元素的背景。

否则，最后一个条件真的很难实现 :) 只需保持为True即可。

这是fiddle链接

width fiddle

这是CSS

.container {
width: 100%;
overflow:hidden;
whitespace:nowrap;
max-width:100%;
    background-color:red;
}
.left {
    width:auto;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    float: left;
    position:absolute;
    max-width:inherit;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    text-align: right;
    width:auto;
    float:right;
}

请确保它是否适合。如果有人对您粘贴的最后一张图片有其他解决方案，请分享一下 :)

- Anobik

---

我猜测在所有5种情况的轮回中，我会尽可能地测试所有情况。我知道有些方式可能会多余，但我会解决它们。 - Anobik

感谢您的努力。正确的div应该被推出视图并显示省略号，因此我已将赏金授予Matthew。 - Philip Murphy

实际上，我试图坚持最后一个要点。只需要在基于 Webkit 的浏览器上工作，因此 CSS3 解决方案是首选。甚至使用 jQuery 和 JavaScript 也很容易。 :) - Anobik

是的 - 总是值得一试 :) 令人惊讶的是，这很难实现。当涉及到布局的任何复杂性时，CSS有时似乎受到某种限制。感谢您的输入 - 我们非常感激。 - Philip Murphy

谢谢 :) 猜测更高版本会取代 js 和 jquery :P 它的发展方式 :D - Anobik