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

试试这个。。容器显示：inline-flex; 弯曲方向：排; 如果你想要居中 Justify-content：center。

Answer 2

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: