三栏布局-根据中心div设置左右div的高度

Question

我需要制作一个三列 css 布局（不设置高度和宽度）。
左右div高度需要根据中心自动设置div（中心div高度取决于内容）

我尝试了位置、高度 100%、溢出，但出了点问题，所以我清除了我的代码，现在我站在这里：

.container {
  background-color: blue;
  overflow: hidden;
}

.left {
   background-color: green;
   float: left;
}

.right {
   background-color: yellow;
   float: left;
}

.center {
   background-color: red;
   float: left;
}

<div class="container">
    <div class="left"> < left</div>
    <div class="center"> 
       <p>Holisticly underwhelm process-centric architectures via functionalized quality vectors. Collaboratively transform turnkey total linkage rather than value-added technologies.</p>
     <p>Holisticly underwhelm process-centric architectures via functionalized quality vectors. Collaboratively transform turnkey total linkage rather than value-added technologies.</p>
    </div>
    <div class="right">right > </div>
</div>

谢谢

Answer 1

试试这个。。容器显示：内联柔性；弹性方向：行；如果你想居中对齐内容：居中。

Answer 2

display:flex 的替代方法是 display:table

.container {
  background-color: blue;
  display: table;
  width: 100%; /*optional*/
}
.container > div {
  display: table-cell;
  vertical-align: top;
}
.left {
  background-color: green;
  width: 75px; /*optional*/
}
.right {
  background-color: yellow;
  width: 75px; /*optional*/
  text-align:right;
}
.center {
  background-color: red;
}

<div class="container">
  <div class="left">&lt; left</div>
  <div class="center">
    <p>Holisticly underwhelm process-centric architectures via functionalized quality vectors. Collaboratively transform turnkey total linkage rather than value-added technologies.</p>
    <p>Holisticly underwhelm process-centric architectures via functionalized quality vectors. Collaboratively transform turnkey total linkage rather than value-added technologies.</p>
  </div>
  <div class="right">right &gt;</div>
</div>

三栏布局-根据中心div设置左右div的高度

Three columns layout - set left and right div's heigth according to center div

html

css

floating