Question

我一直在和这个争斗一段时间，我正在尝试进行一个特定的设置，我对它感到非常沮丧，我已经使用了表格（非常糟糕）。所以我正在努力做到：

5个div。

1在屏幕右侧，~120px宽度，100％页面身高
1，高120px，宽120px
1高于那个，120宽度，所有剩余高度
位于顶部的这1个div之间的中间，高度为80px，
和其他div之间的宽度填充
并且中间的最后一个div占用了所有剩余的空间

我提出的任何解决方案至少需要一些JS，我正在尽我所能避免，所以我正在寻找纯粹的CSS3解决方案！

Answer 1

你可以使用display flex

使用HTML5和CSS3

我很快就嘲笑了http://codepen.io/tom-maton/pen/mbJAs

HTML：

<div class="main">
  <div class="left">
    <div class="top-left-column">Top left</div>

    <div class="bottom-left-column"> bottom left</div>
  </div>
  <div class="center">
    <div class="center-top-column">Top Center</div>

    <div class="center-bottom-column">Bottom center</div>
  </div>
  <div class="right">
    <div class="right-column">Right Column</div>
  </div>
</div>

CSS：

div {
  border: 1px solid #333;

}

.main {  
  border: 0;
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.top-left-column {
  height: calc(100vh - 120px);
  width: 120px;
}

.bottom-left-column {
  height: 120px;
  width: 120px;
}

.center {
  display: flex;
  align-content: stretch;
  flex-direction: column;
  flex: 1 1 0;
}

.center-top-column {
  height: 80px;
}

.center-bottom-column {
  height: calc(100vh - 80px);
}

.right-column {
  height: 100vh;
  width: 120px;
}

您只需要事先检查浏览器支持，因为IE8 / 9不支持flex

有div布局定位的问题

1 个答案: