Question

我正在创建一个博客模板，其中内容（桌面浏览器）几乎居中。

我想构建一个填充屏幕区域而不会产生多余滚动的容器div。在该div容器中，我想要左边的一个固定div（例如250px）和一个固定在右边（例如350px），中心div响应直到它达到最大宽度1000px。

可以使用像calc这样的函数来完成吗？

Answer 1

通过设置width: calc(100% - [combined widths])， calc() 确实可以实现这一点。
在您的具体示例中，它将是width: calc(100% - 250px - 350px) 请注意， max-width 仍会发挥作用，以防止核心<div>超过1000px。

＆＃13;

body {
  margin: 0;
}

div {
  height: 100vh;
  float: left;
}

.left {
  background: red;
  width: 250px;
}

.right {
  background: green;
  width: 350px;
}

.center {
  background: blue;
  width: calc(100% - 250px - 350px);
  max-width: 1000px;
}

＆＃13;

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

＆＃13;

Answer 2

在这种情况下，flexbox的优点是，如果您的中心内容增长，其他列将会一起增长！

＆＃13;

body {
  display:flex;
}

.center {
  flex: 1;
  min-height: 100vh;
  background: blue;
  max-width: 1000px;
}

.left {
  background: red;
  flex: 0 0 250px;
}

.right {
  background: green;
  flex: 0 0 350px;
}

＆＃13;

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

＆＃13;

具有固定尺寸尺寸栏div和响应中心div的屏幕宽容器？

2 个答案: