Html 如何并排放置两个 div，其中左边一个大小适合，另一个占用剩余空间？

How to place two divs side by side where LEFT one is sized to fit and other takes up remaining space?

提问by Philip Murphy

I'm trying to place two div's beside each other with the following criteria:

我正在尝试使用以下标准将两个 div 并排放置：

1. Both divs must stay on the same line.
2. Priority must be given to the left div. As much text as possible should be displayed in the left div up to the point where ellipsis is used in case of overflow.
3. The right div's text should be right aligned. In the case of overflow, ellipsis should be used.
4. Text is dynamic, so no percentages or fixed widths can be used.
5. Only needs to work on webkitbased browser, so CSS3solution is preferred.

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

Here are some sample images of how it would look:

以下是一些示例图片，展示了它的外观：

Input

输入

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

Output

输出

Input

输入

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

Output

输出

Input

输入

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

Output

输出

采纳答案by Matthew

I have it with the exception that when there is empty space my right div is eating it (with text right aligned). You don't list that as an ask, so I was unsure if it was just how you drew it? Fiddle here: http://jsfiddle.net/mdares/fSCr6/

我有它，但当有空白空间时，我的右 div 正在吃它（文本右对齐）。你没有把它列为一个问题，所以我不确定它是不是你画的？在这里小提琴：http: //jsfiddle.net/mdares/fSCr6/

HTML:

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:

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

And finally:

最后：

回答by Anobik

Except the container width That can be defined in % here's a solution. The only crack that worked was putting container backgroud as that of child one.

除了可以在 % 中定义的容器宽度，这是一个解决方案。唯一有效的方法是将容器背景设为儿童一号的背景。

or else the last condition is really hard to achieve :) Just being True.

否则最后一个条件真的很难实现:) 只是真实。

Here's the fiddle link

这是小提琴链接

width fiddle

宽度小提琴

Here's the css

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

See to it if it fits . Last condition really tough if some one has another solution to the last image you pasted then please share :)

看看它是否合适。如果有人对您粘贴的最后一张图片有另一种解决方案，那么最后一个条件真的很难，请分享:)