Как сделать настраиваемые столбцы css?

С Bootstrap или W3 это просто, но в этом приложении я не хочу использовать это для создания столбцов. Как мне справиться с проблемой столбцов с помощью чистого CSS? Мне нужно сделать что-то вроде этого:

введите описание изображения здесь

Я повторяю ... Без использования bootstrap, w3 или любого другого фреймворка css, как мне это сделать.

Это мой простой HTML-код:

<div style="width: 50px; float: left">
  << Prev
</div>
<div style="float: left">
  <h1>Some Info... this is the responsive div. Always the rest of the size extracting the 50px of the other divs</h1>
</div>
<div style="width: 50px; float: left">
  Next >>
</div>

html css css-multicolumn-layout
person Sergio Mendez    schedule 22.02.2018    source источник
comment
Хорошо, вы можете использовать сетку css css-tricks.com/snippets/css/complete -guide-grid или гибкий css-tricks.com / snippets / css / a-guide-to-flexbox. CSS-сетка является новейшей технологией, поэтому в зависимости от поддержки вашего браузера вы можете выбрать лучший для себя   -  person Huangism    schedule 22.02.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать flexbox:

.container {
  display: flex;
  height: 200px;
}

.side {
  width: 50px;
  height: 100%;
  background: purple;
}

.middle {
  flex-grow: 1;
  background: blue;
}
<div class="container">
  <div class="side"></div>
  <div class="middle"></div>
  <div class="side"></div>
</div>

person Jesse    schedule 22.02.2018
comment
Для гибкого контейнера нет необходимости указывать ширину 100%. - person Huangism; 22.02.2018