Создайте 3 столбца в HTML - левая и правая фиксированная ширина и средняя эластичность

Question

Я пытаюсь создать три столбца в html с левым столбцом, расположенным с левой стороны экрана и с фиксированной шириной, с правой стороны, расположенным с правой стороны экрана и с фиксированной шириной и средним столбцом. elasti c и заполнение оставшейся ширины. Я пытаюсь НЕ использовать flex, если это возможно.

Как должен выглядеть CSS?

html

<div class="container">
    <div class="left">Left</div>
    <div class="middle">Middle</div>
    <div class="right">Right</div>

</div>

css

.container {}
.left {}
.middle {}
.right {}

Answer 1

Я создал два простых примера. Первый не использует flex, если вы не хотите его использовать.

Пример использования calc()

.container > div {
   float: left;
}
.left {
   width: 100px;
   background-color: pink;
}
.middle {
   width: calc(100% - 200px);
   background-color: blue;
}
.right {
   width: 100px;
   background-color: yellow;
}

<h1>No flex</h1>
<div class="container">
    <div class="left">Left</div>
    <div class="middle">Middle</div>
    <div class="right">Right</div>
</div>

Пример использования flex

.container {
   display: flex;
}
.left {
   width: 100px;
   background-color: pink;
}
.middle {
   flex-grow: 1;
   background-color: blue;
}
.right {
   width: 100px;
   background-color: yellow;
}

<h1>Flex</h1>
<div class="container">
    <div class="left">Left</div>
    <div class="middle">Middle</div>
    <div class="right">Right</div>
</div>

Answer 2

Можно использовать

float: left; и float: right, но имеет следующие недостатки:

1. Элемент middle необходимо использовать после элемента right.
2. Если высота элементов зависит от их содержимого, высота всех элементов не будет соответствовать, пока вы не укажете фиксированную высоту. Вы можете видеть серую область, которая является контейнером в приведенном ниже примере.

.container {
  text-align: center;
  background: lightgray;
}

.container::after {
  content: '';
  display: block;
  width: 0;
  clear: both;
}
.left {
  float: left;
  width: 150px;
  background: #33AFFF;
}
.right {
  float: right;
  width: 150px;
  background: #FFC300;
}
.middle {
  margin-left: 150px;
  margin-right: 150px;
  background: #FF5733;
}

<h2>float</h2>

<div class="container">
  <div class="left">left left left left left left left left left left </div>
  <div class="right">right right right right right </div>
  <div class="middle">middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle </div>
</div>

<div>Next element</div>

Или вы можете использовать display: table, и это дети с display: table-cell.

.container {
  display: table;
  width: 100%; 
}

.left {
  display: table-cell;
  width: 150px;
  background: #33AFFF;
}
.middle {
  display: table-cell;
  background: #FFC300;
}
.right {
  display: table-cell;
  width: 150px;
  background: #FF5733;
}

<h2>display: table &amp; display: table-cell</h2>

<div class="container">
  <div class="left">left left left left left left left left left left</div>
  <div class="middle">middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle </div>
  <div class="right">right right right right right </div>
</div>

<div>Next element</div>