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

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

12 голосов
/ 13 августа 2011

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

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

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

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

Я надеюсь, что кто-то из вас сможет мне помочь!

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

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

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

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

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

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

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

Я также хотел, чтобы div занимал одну строку, поэтому я установил такой строгий CSS для содержимого div «остаточного размера». переполнение: скрытый; текст переполнение: многоточие;

Ответы [ 3 ]

6 голосов
/ 16 августа 2011 

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

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

Я также хотел заставить div занимать одну строкуВот почему я установил такой строгий CSS для содержимого Div оставшегося размера.переполнение: скрытый;текст переполнение: многоточие;

2 голосов
/ 13 августа 2011

Это должно сработать для тебя, приятель.

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

0 голосов
/ 13 августа 2011

вы можете использовать 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/ - вот рабочий пример

...