Как разместить два divs бок о бок, где LEFT один размер подходит, а другой занимает оставшееся пространство?

Я пытаюсь разместить два div рядом друг с другом со следующими критериями:

  • Оба div должны оставаться на одной строке.
  • Приоритет должен быть отдан левому div. Как можно больше текста должно отображаться в левом div до точки, где используется эллипс в случае переполнения.
  • Правильный текст div должен быть выровнен по правому краю. В случае переполнения следует использовать эллипсис.
  • Текст является динамическим, поэтому никакие проценты или фиксированные ширины не могут использоваться.
  • Нужно работать только с браузером 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>

Выход

enter image description here

Вход

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

Выход

enter image description here

Ввод

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

Выход

enter image description here

ОТВЕТЫ

Ответ 1

У меня есть это, за исключением того, что когда есть пустое пространство, мой правый div ест его (с выравниванием текста). Вы не указали это как вопрос, так что я был не уверен, что именно так вы его нарисовали? Fiddle здесь: 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;
}

И наконец:

enter image description here

Ответ 2

За исключением ширины контейнера. Это может быть определено в% здесь решением. Единственная трещина, которая сработала, заключалась в том, что контейнер backgroud был похож на детскую.

иначе последнее условие действительно трудно достичь:) Просто быть правдой.

Здесь ссылка скрипта

ширина скрипки

Здесь 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;
}

Смотрите, если он подходит. Последнее условие действительно жесткое, если у кого-то есть другое решение для последнего изображения, которое вы вставили, пожалуйста, поделитесь:)