Question

我有三个容器，left，middle和right。宽度比率分别为15％，70％和15％。我想将中间容器的最大宽度限制为1000px。

只要屏幕分辨率低于1428px，这就可以正常工作。如果屏幕分辨率大于1428px，则70％变为大于1000px。所以我需要为这些更大的屏幕编写另一条规则。

所以中间容器现在是1000px。我如何将休息空间分配给其他两个容器 - left和right？ JavaScript解决方案在浏览器中提供了一定的跳跃/抖动。我想在浏览器中避免这些震动。

Answer 1

好的，这就是事情的方式。我想你有这样的HTML：

HTML：

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

所以你必须像这样申请css（我不知道你是否对浏览器支持感到满意，但我认为只有其他方式没有css）

CSS：

html,body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}
.left,.right,.center{
  float:left;
  margin:0;
  padding:0;
  display:inline-block;
  height: 100px;
}
.left,.right{
width:15%;
background:yellow;
}
.center{
  background:red;
  width:70%;
  max-width:1000px;
}
@media(min-width:1000px){
  .left,.right{
    width:calc((100vw - 1000px) / 2)
  }
}

https://jsfiddle.net/Lghms68y/这是一个小提琴。注意：您必须缩小页面以查看效果：）

在一个固定宽度的容器

1 个答案: