3 колонка (фиксированная, текучая, фиксированная) с минимальной шириной

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

Я ищу, чтобы у меня было 3 столбца, левый столбец был зафиксирован на 200 пикселей, правый столбец - 200 пикселей, а центральный столбец - на оставшуюся ширину, но с минимальной шириной 600 пикселей. поэтому общая минимальная ширина составляет 200px + 600px + 200px = 1000px.

Я видел много примеров, когда столбцы, кажется, перекрывают друг друга при изменении размера браузера, что является проблемой.

Ответы

Ответ 1

Если порядок источника не имеет значения, одно простое решение - использовать таблицу display table/table. Сделайте упаковку шириной 100% с минимальной шириной. Укажите ширину столбцов с фиксированной шириной. При отображении таблицы все столбцы будут иметь равную высоту.

#wrapper {
  display: table;
  width: 100%;
  min-width: 1000px;
  min-height: 400px;
}
#column-1 {
  display: table-cell;
  background: #DDF;
  width: 200px;
}
#column-2 {
  display: table-cell;
  background: #EEE;
}
#column-3 {
  display: table-cell;
  background: #DDF;
  width: 200px;
}

<div id="wrapper">
  <div id="column-1">= 200px</div>
  <div id="column-2">&gt;= 600px</div>
  <div id="column-3">= 200px</div>
</div>

Ответ 2

Попробуйте мультимедийные запросы в разрешении экрана < 1000 пикселей используют значения const. Это может помочь вам.