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

Это должно быть легко... почему это непросто?

Я хочу иметь 2 divs бок о бок, где один div будет автоматически настраиваться на содержимое внутри, а второй div просто заполнит оставшуюся ширину. Мне нужно, чтобы текст в div "остающейся ширины" был усечен, если он слишком велик, поскольку я могу только иметь эти divs в одной строке.

Я искал весь день, и ближайший я нашел этот пост, который предложил использовать таблицы, которые STILL не устранил проблему.

Вот код jsfiddle, который воспроизводит мою проблему: http://jsfiddle.net/ssawchenko/gMxWc/

Я надеюсь, что один из вас может скрыть меня!

=== Решение CSS (Hacky)? ===

Очевидно, что добавление отрицательного поля (которое должно гарантировать, что оно будет достаточно большим, чтобы покрыть правильный размер) будет "работать". Это кажется настолько взломанным и не может полностью решить проблему. Если я перетащил окно jsfiddle в сторону, чтобы сжиматься и увеличивать divs, возникают некоторые странности, где сжимающийся текст, кажется, плавает не полностью.

.right_part 
{
  margin-left:-1000px; 
  background:yellow;   
  float:right;
  white-space:nowrap;
}

=== Полное решение для CSS ===

НАКОНЕЦ нашел правильную комбинацию CSS!

http://jsfiddle.net/ssawchenko/gKnuY/

Моя ошибка заключалась в том, что я неправильно плавал свой контент "fit to". Переместив div в нужное место в DOM, содержимое будет правильно загружено, а div "оставшегося размера" теперь правильно займет оставшееся пространство.

Я также хотел заставить divs заняться ОДНОЙ строкой, поэтому я установил такой строгий CSS для содержимого div "оставшегося размера". переполнение: скрытый; текст переполнение: многоточие;

Ответ 1

#full_width_div {
    background-color:#5B8587;
    width:100%;
}
.left_part {
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.right_part {
   background:yellow;   
   float:right;
   white-space:nowrap;
}

<div id="full_width_div">
  <div class="right_part">
     Size to fit me completely
  </div>
  <div class="left_part">
     I am long and should be truncated once I meet up with the size to me text.
  </div>    

  <div style="clear:both;" />
</div>

Ответ 2

Это должно сработать для вас.

<html>
<head>
<style>
#full_width_div, #full_width_div table {
    background-color:#5B8587;
    width:100%;
    max-height: 20px;
    overflow: hidden;
}

.left_part {
    background:red;
    width: 100%;
    overflow:hidden;
}
.right_part {
   background:yellow;  
   white-space:nowrap;
   verticle-align: top;
}
</style>
</head>
<body>
<div id="full_width_div">
    <table>
        <tr>
            <td class="left_part" valign="top">I am long and should be truncated once I meet up with the size to me text.</td>
            <td class="right_part" valign="top">Size to fit me completely</td>
        </tr>
    </table>
</div>
</body>
</html>

Ваш рабочий jsfiddle → http://jsfiddle.net/gMxWc/68/

Ответ 3

вы можете использовать jQuery и код следующим образом:

$(document).ready(function() {
    redraw();
});

$(window).resize(function() {
    redraw();
});

function redraw()
{
    var full_width = $('body').width();
    var left_width = $('.left_part').width();
    $('.right_part').width(full_width - left_width );
}

http://jsfiddle.net/gMxWc/62/ - вот рабочий пример