如何将两个div并排放置，其中一个大小适合，另一个占用剩余空间？ [英] How to place two divs side by side where LEFT one is sized to fit and other takes up remaining space?

问题描述

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

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

2. 优先级必须指定给左侧div。


3. 右侧div的文本应该是右侧文本应该显示在左侧div中，直到在溢出的情况下使用省略号。对齐。 。
   
4. 文字是动态的，因此不能使用百分比或固定宽度。


5. 只需要处理基于浏览器的 webkit ，因此 CSS3 解决方案

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 webkit based browser, so CSS3 solution is preferred.

下面是一些样例图片：

输入

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

输出

推荐答案

我有它的例外，当有空的空间我的右div正在吃它（文本右对齐）。你不把它列为一个问题，所以我不确定是否只是你怎么画？在此处： http://jsfiddle.net/mdares/fSCr6/

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/

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

最后：

这篇关于如何将两个div并排放置，其中一个大小适合，另一个占用剩余空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！