问题描述
我有一个被水平分成三份的组件。左边和右边的元素将各自占据固定的宽度,中间的元素应该填充它们之间的空间。
<div>
<div class="left">Left Element</div>
<div class="middle">MiddleElement</div>
<div class="right">Right Element</div>
</div>
在我的 css 中,我为左右元素设置了固定宽度,然后使用 calc() 告诉中间元素占据其余部分。
.left,.right {
width: 8px;
}
.middle {
width: calc(100% - 16px);
}
然而,结果是中间元素有点太小了。当我打开调试工具时,我看到它的 css 已更改为:
width: calc(84%);
就好像忽略了 % 和 px,从 100 中减去了 16,然后在最后重新加上了 %。
如果我将中间元素更改为使用完全相同的样式,但内联编写,则效果很好。
<div>
<div class="left">Left Element</div>
<div style="width: calc(100% - 16px)">MiddleElement</div>
<div class="right">Right Element</div>
</div>
我知道还有其他方法可以获得我想要的效果,例如将父 div 的显示设置为 flex 并将中间元素的宽度保留为 100%。但更重要的是,我很想知道我对如何为 css 类和内联样式编写规则的误解。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)