在 HTML 中创建 3 列 – 左右固定宽度和中间弹性

Question

我正在尝试在 html 中创建三列，左列位于屏幕左侧且宽度固定，右侧列位于屏幕右侧且宽度固定，中间列具有弹性并填充剩余宽度。如果可能的话，我试图不使用 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>