Как сделать горизонтальный ряд с div, один из которых резиновый, занимает всю оставшуюся ширину
Задача – нужно сделать блок в горизонтальном ряду, чтобы он занимал всю ширину между соседними фиксированными. Решение простое – оборачиваем весь ряд в div, отображаем содержимое как табличные ячейки. Средний ряд получится резиновым и будет растягиваться.
HTML блок:
<div class="wrapper"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> |
CSS блок такой:
.wrapper {
display: table;
width: 100%;
table-layout: fixed;
}
.one {
width: 100px;
display: table-cell;
height: 30px;
background-color: #0165d2;
}
.two {
display: table-cell;
height: 30px;
background-color: #A0A0A0;
}
.three {
width: 200px;
display: table-cell;
height: 30px;
background-color: #0282B2;
} |
Главный момент здесь в использовании “table-layout: fixed”, что позволяет резиновой ячейке не растягиваться дальше, если её содержимое станет больше ширины.
