Как сделать элемент встроенного блока заполнить оставшуюся часть строки?

Возможно ли такое использование CSS и двух встроенных блоков (или других) DIV-тегов вместо использования таблицы?

Версия таблицы такова (границы добавлены, чтобы вы могли ее видеть):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>

Он создает левый столбец с FIXED WIDTH (не процентная ширина) и правый столбец, который расширяется, чтобы заполнить ОСТАЛЬНОЕ ПРОСТРАНСТВО на линии. Звучит довольно просто, не так ли? Кроме того, поскольку ничто не "плавает", высота родительского контейнера должным образом расширяется, чтобы охватить высоту содержимого.

- НАЧАТЬ RANT -
Я видел реализации "ясного исправления" и "святого грааля" для многоколоночных макетов с боковым столбцом фиксированной ширины, и они сосут, и они сложны. Они меняют порядок элементов, используют процентную ширину или используют поплавки, отрицательные поля, а взаимосвязь между атрибутами "слева", "справа" и "маржа" является сложной. Кроме того, макеты чувствительны к субпикселю, поэтому добавление даже одного пикселя границ, отступов или полей разбивает весь макет и отправляет целые столбцы на следующую строку. Например, ошибки округления являются проблемой, даже если вы попытаетесь сделать что-то простое, например, поместите 4 элемента в строку, каждая из которых будет равна 25%.
- КОНЕЦ RANT -

Я пробовал использовать "inline-block" и "white-space: nowrap;", но проблема в том, что я просто не могу получить второй элемент, чтобы заполнить оставшееся пространство на линия. Установка ширины на что-то вроде "width: 100% - (LeftColumWidth) px" будет работать в некоторых случаях, но выполнение вычисления в свойстве width не поддерживается.

Ответ 1

Смотрите: http://jsfiddle.net/qx32C/36/

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 20px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}

<div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

Ответ 2

Современное решение с использованием flexbox:

.container {
    display: flex;
}
.container > div {
    border: 1px solid black;
    height: 10px;
}

.left {
   width: 100px;
}

.right {
    width: 100%;
    background-color:#ddd;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

Ответ 3

Совместим с обычными современными браузерами (IE 8+): http://jsfiddle.net/m5Xz2/3/

.lineContainer {
    display:table;
    border-collapse:collapse;
    width:100%;
}
.lineContainer div {
    display:table-cell;
    border:1px solid black;
    height:10px;
}
.left {
    width:100px;
}

 <div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

Ответ 4

Вы можете использовать calc (100% - 100px) для элемента жидкости вместе с display: inline-block для обоих элементов.

Имейте в виду, что между тегами не должно быть пробела, в противном случае вам придется учитывать это пространство и в калькуляторе.

.left{
    display:inline-block;
    width:100px;
}
.right{
    display:inline-block;
    width:calc(100% - 100px);
}


<div class="left"></div><div class="right"></div>

Быстрый пример: http://jsfiddle.net/dw689mt4/1/

Ответ 5

Если вы не можете использовать overflow: hidden (потому что вы не хотите overflow: hidden), или если вам не нравятся CSS-хаки/обходные пути, вы можете использовать JavaScript вместо этого. Обратите внимание, что это может не сработать, потому что это JavaScript.

var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
  right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}

.lineContainer {
  width: 100% border: 1px solid #000;
  font-size: 0px;
  /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}

.lineContainer div {
  height: 10px;
  display: inline-block;
}

.left {
  width: 100px;
  background: red
}

.right {
  background: blue
}

<div class="lineContainer">
  <div class="left"></div>
  <div class="right"></div>
</div>

Ответ 6

Когда вы отказываетесь от встроенных блоков

.post-container {
    border: 5px solid #333;
    overflow:auto;
}
.post-thumb {
    float: left;
    display:block;
    background:#ccc;
    width:200px;
    height:200px;
}
.post-content{
    display:block;
    overflow:hidden;
}

http://jsfiddle.net/RXrvZ/3731/

(из CSS Float: плавающее изображение слева от текста)

Ответ 7

Я использовал свойство flex-grow для достижения этой цели. Вам нужно установить display: flex для родительского контейнера, затем вам нужно установить flex-grow: 1 для блока, который вы хотите заполнить оставшееся пространство, или просто flex: 1 как tanius упоминается в комментариях.