Javascript 如何组合固定比率div和固定宽度div？

我需要两个

div

。左<代码>和右<代码>一个。左侧具有固定的纵横比（即2/3），右侧的高度与左侧相同，但宽度具有固定值，即200px。我该怎么写呢？目标是使用尽可能多的浏览器空间

左固定纵横比div正常：

正文{
填充：0；
保证金：0；
}
.r-4by3-wrap{
最大宽度：计算值（100vmin*2/3）；
保证金：自动；
}
.r-4by3{
身高：0；
填充顶部：150%；
显示器：flex；
}

---

我不太喜欢很多嵌套元素，但您可以通过将左、右div包装在父flex容器中来解决这个问题。确保在父级上进行宽度计算，并为右侧div添加所需的200px：

正文{
填充：0；
保证金：0；
}
.家长{
显示器：flex；
保证金：0自动；
最大宽度：计算（计算（100vmin*2/3）+200px）；
}
.r-4by3-wrap{
宽度：calc（100vmin*2/3）；
保证金：自动；
}
.r-4by3{
身高：0；
填充顶部：150%；
}
.对{
边框：10px纯蓝色；
背景：浅蓝色；
宽度：200px；
}

---

CSS网格在这里有帮助：

正文{
填充：0；
保证金：0；
}
.内部{
边框：10px纯红；
显示：网格；
网格模板柱：1fr 1fr 1fr；
}
.r-4by3-wrap{
//最大宽度：计算值（100vmin*2/3）；
保证金：自动；
}
.r-4by3{
身高：0；
填充顶部：150%；
网格柱：2；
}
.对{
最大宽度：100px；
/*仅供演示*/
背景：浅蓝色；
}

正当

不要重复同一个问题，两者之间的间隔不到1小时。编辑旧版本以添加更多详细信息！您认为可以将

parent

置于中间位置吗？是的，您可以将其左右边距设置为

auto

。我更新了答案。嗨！谢谢我在整个父分区上方有一个条。您认为可以设置

padding top:150%44px

稍微小一点？如果是这样，它的表达式是什么？

padding top:150%

是使它保持纵横比的原因。当然，您可以根据自己的喜好进行更改。我建议你尝试不同的价值观，以找到适合你的网站：o）