Возможна ли такая вещь, используя 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>
Он создает левый столбец с ФИКСИРОВАННОЙ ШИРИНОЙ (не в процентах по ширине) и правый столбец, который расширяется, заполняя оставшееся пространство в строке. Звучит довольно просто, правда? Кроме того, поскольку ничто не «плавает», высота родительского контейнера должным образом увеличивается, чтобы охватить высоту содержимого.
- НАЧАЛО RANT--
Я видел реализации «clear fix» и «holy grail» для многостолбцовых макетов с боковым столбцом фиксированной ширины, и они отстойные и сложные. Они изменяют порядок элементов, используют ширину в процентах или используют значения с плавающей запятой, отрицательные поля, а отношения между атрибутами «left», «right» и «margin» являются сложными. Кроме того, макеты чувствительны к субпикселям, поэтому добавление даже одного пикселя границ, отступов или полей нарушит весь макет и отправит перенос столбцов на следующую строку. Например, ошибки округления представляют собой проблему, даже если вы пытаетесь сделать что-то простое, например, поместить 4 элемента в линию с шириной каждого из них, равной 25%.
--END RANT--
Я пытался использовать "inline-block" и "white-space: nowrap;", но проблема в том, что я просто не могу получить 2-й элемент, чтобы заполнить оставшееся место в строке. Установка ширины на что-то вроде «width: 100% - (LeftColumWidth) px» будет работать в некоторых случаях, но выполнение вычисления в свойстве width на самом деле не поддерживается.
источник
display: table-*
конструкцию, которая будет работать, но на самом деле не «более семантическая» (ужасный случайdiv
супа) и нарушает совместимость с IE6. Я лично буду придерживаться этого<table>
, если кому-то не удастся придумать гениальную простую идею, которая работает безОтветы:
Смотрите: http://jsfiddle.net/qx32C/36/
Почему я заменить
margin-left: 100px
сoverflow: hidden
на.right
?РЕДАКТИРОВАТЬ: Вот два зеркала для вышеупомянутой (мертвой) ссылки:
источник
box-sizing: border-box
наdiv
с. Просто предположение, так как вы не предоставили демонстрацию, демонстрирующую поведение, которое вы описываете. При этом решение наdisplay: table
основе обычно лучше . Это очень старый вопрос, но я думаю, что из-за поведения OP я пытался избежать каких-либо действий с таблицами в этом вопросе.Современное решение с использованием flexbox:
http://jsfiddle.net/m5Xz2/100/
источник
flex: 1
вместоwidth: 100%
?flex: 1
это сокращение отflex-grow: 1
. Это атрибут сочетание:flex: <grow> <shrink> <basis>
.flexbugs
вы знаете.Совместим с обычными современными браузерами (IE 8+): http://jsfiddle.net/m5Xz2/3/
источник
display:table
.inline-block
заполнить оставшуюся часть строки.Вы можете использовать calc (100% - 100px) для элемента жидкости вместе с display: inline-block для обоих элементов.
Имейте в виду, что между тегами не должно быть пробела, в противном случае вам придется учитывать это пространство и в калькуляторе.
Быстрый пример: http://jsfiddle.net/dw689mt4/1/
источник
Я использовал
flex-grow
собственность для достижения этой цели. Вы должны будете установитьdisplay: flex
родительский контейнер, затем вам нужно установитьflex-grow: 1
блок, который вы хотите заполнить оставшимся пространством, или так же,flex: 1
как танус, упомянутый в комментариях.источник
Если вы не можете использовать
overflow: hidden
(потому что вы не хотитеoverflow: hidden
) или вам не нравятся хаки / обходные пути CSS, вы можете вместо этого использовать JavaScript. Обратите внимание, что это может не сработать, потому что это JavaScript.http://jsfiddle.net/ys2eogxm/
источник
Когда вы отказываетесь от встроенных блоков
http://jsfiddle.net/RXrvZ/3731/
(из CSS Float: плавающее изображение слева от текста )
источник