如何在CSS最大宽度,高度计算中添加组件? [英] How to add components to css max-width, height calculation?
问题描述
我有这样的布局:
body {
padding: 0;
margin: 0;
}
.r-4by3-wrap {
max-width: calc(100vmin * 2 / 3);
margin: auto;
}
.r-4by3 {
height: 0;
padding-top: 150%;
display: flex;
}
<body>
<div class="r-4by3-wrap">
<div style="border: 10px solid red">
<div class="r-4by3" style="background: pink">
</div>
</div>
</div>
</body>
但需要在表达式中添加额外的bias componenet
but need to add extra bias componenet into the expressions
calc(100vmin * 2/3)
–> calc(100vmin * 2/3 + 200)
在这里
填充顶部:150%;
-> padding-top:-200 * 150%;
我如何将其形式化?首先是从语法上讲还可以,但是做其他我期望得到的事情.第二是完全错误的.
How could I formalize it? First is sintacticall ok, but just does something else I would expect. Second is totally wrong.
推荐答案
您可以分享期望的输出吗?同时,您可以尝试使用最大宽度 calc((100vmin * 2/3)+ 200px)
.
Can you share what output you expect?
Meanwhile you can try this for max-width calc((100vmin * 2 / 3) + 200px)
.
对于填充,您可以添加 box-sizing:border-box;
,这样就不会在特定高度上添加额外的高度.看看是否有帮助.
For padding, you can add box-sizing: border-box;
so it doesn't add additional height to specific height. See if it helps.
这篇关于如何在CSS最大宽度,高度计算中添加组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!