Question

所以有3列全部具有100％的垂直高度。

左列的固定宽度为80px。

中间列和右列以80％到20％的比例填充可用空间。因此，中间占据80％的空间，而右边占据20％的空间。

右列宽度但是如果小于100px则固定为100px。最小宽度为100px，最大宽度为可用空间的20％。

我现在知道没有办法提及可用的垂直或水平空间，或选择百分比指的是......这就是我迷失的原因。

我不能使用flexbox，也不想使用javascript（但请确保首先使用css是不可能的。）

Answer 1

这是您想要的demo。

CSS

*{
  margin: 0
}
body, html, .outer, .leftCol, .rightSec, .innerCnt{
  height: 100%;
}
.leftCol {
  min-height:100px;
  width: 80px;
  float: left;
  background: red
}
.rightSec {
  margin-left:80px
}
.innerCnt {
  display: table;
  width: 100%;
}
.midCol {
  width: 80%;
  background: green;
  height:100px;
  display: table-cell;
}
.rightCol {
  min-width: 100px;
  display: table-cell;
  background: yellow;
  height:100px;
}

Answer 2

使用display: table和display: table-cell可以轻松实现这一目标。

http://jsfiddle.net/Mgzbq/

HTML

<div class="table main">

<div class="cell left">left</div>

<div class="cell">

<div class="table inner">
<div class="cell center"></div>
<div class="cell right"></div>
</div>

</div>

</div>

CSS

.table {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    vertical-align: middle;/* Keep this as top|middle|bottom, otherwise the container table of center and right div will have "vertical-align: baseline" and doesn't position properly if there is no content in center and right div*/
}
.left {
    width: 80px;
    background-color: #E07749;
}
.center {
    width: 80%;
    background-color: #E0DD49;
}
.right {
    width: 20%;
    min-width: 100px;
    background-color: #49E0AE;
}
.main {
    width: 100%;
    height: 200px;
}
.inner {
    width: 100%;
    height: 100%;
}

如何在css3中制作这样的三列布局

2 个答案:

HTML

CSS