Question

我需要垂直对齐3个块，其中中心块应占用剩余空间，并且横向块是自动调整的。

我的代码（PEN）：

＆＃13;

.parent {
  background: lightgray;
  //display: table;
}

[class|="i"] {
  display: inline-block;
  //display: table-cell;
  padding: 5px;
  margin: 0;
}

.i-left {
  background: green;
}

.i-full {
  background: lightgreen;
  width: 30%;
  vertical-align: middle;
}

.i-right {
  background: lightblue;
}

＆＃13;

<div class="parent">
    <div class="i-left">[min space left long size]</div>
    <div class="i-full">
        [long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row]
    </div>
    <div class="i-right">[min space right]</div>
</div>

＆＃13;

=== 限制

应强加任何固定尺寸;
横向块是可变的并且自动调整（具有 table 的变体被注释掉并不尊重这一点）;
应该使用任何flex（因为IE9不兼容）;
块应垂直中间对齐;
块可以是任何东西（内联，表格，单元格等......）。

Answer 1

布局的CSS表格和＆＃34;自动调整大小的＃{1}}左/右单元格，因此文本不会换行。

＆＃13;

white-space:nowrap

＆＃13;

.parent {
  background: lightgray;
  display: table;
}
[class|="i"] {
  display: table-cell;
  padding: 5px;
  margin: 0;
  vertical-align: middle;
}
.i-left {
  background: green;
  white-space: nowrap
}
.i-full {
  background: lightgreen;
}
.i-right {
  background: lightblue;
  white-space: nowrap
}

＆＃13;

Codepen Demo

垂直对齐并填充3个块的剩余空间

1 个答案: