html - 三列固定宽度的网页设计

Question

我想要 3 列:侧列 80px 宽度，中间列其余部分

我的第一种方法:在页面加载时我计算屏幕宽度，减去 160px 并将此结果分配给中心列的宽度

这可以用 css 自动完成吗？

Answer 1

您可以使用 2 个 80 像素宽的 float 列和中间一个的左/右边距:

div {
  height: 150px; /* <-- fake height */
}
.col {
  background: teal;
  width: 80px;
  float: left;
}
.center {
  margin: 0 85px; /* <-- width of left/right columns + gutters */
  background: gold;
}
.col.r {
  float: right;

<div class="col"></div>
<div class="col r"></div>
<div class="center"></div>