Как заставить элемент inline-block заполнить остаток строки? - PullRequest
Новая
       22

Как заставить элемент inline-block заполнить остаток строки?

170 голосов
/ 04 апреля 2011

Возможна ли такая вещь с использованием 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 (не в процентах ширины) и правый столбец, который расширяется, чтобы заполнить REMAINING SPACE в строке. Звучит довольно просто, правда? Более того, поскольку ничто не «плавает», высота родительского контейнера должным образом увеличивается, чтобы охватить высоту содержимого.

- НАЧАЛО АРЕНДЫ -
Я видел реализации «clear fix» и «holy grail» для многостолбцовых макетов с боковым столбцом фиксированной ширины, и они отстойные и сложные. Они изменяют порядок элементов, используют ширину в процентах или используют значения с плавающей запятой, отрицательные поля, а отношения между атрибутами left, right и margin являются сложными. Кроме того, макеты чувствительны к субпикселям, поэтому добавление даже одного пикселя границ, отступов или полей нарушит весь макет и отправит перенос столбцов на следующую строку. Например, ошибки округления представляют собой проблему, даже если вы пытаетесь сделать что-то простое, например, поместить 4 элемента в линию с шириной каждого из них, равной 25%.
- END RANT -

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

Ответы [ 7 ]

167 голосов
/ 08 апреля 2011

См .: 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>

Почему я заменил margin-left: 100px на overflow: hidden на .right?

РЕДАКТИРОВАТЬ: Вот два зеркала для вышеуказанной (мертвой) ссылки:

51 голосов
/ 29 мая 2015

Современное решение с использованием 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>

http://jsfiddle.net/m5Xz2/100/

42 голосов
/ 26 ноября 2013

Совместимо с обычными современными браузерами (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>
2 голосов
/ 10 августа 2018

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

1 голос

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

0 голосов
/ 28 февраля 2018

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

.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: плавающее изображение слева от текста )

0 голосов
/ 26 сентября 2014

Если вы не можете использовать 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>

http://jsfiddle.net/ys2eogxm/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...