时间戳

首页 > 解决方案 > CSS calc() 精度问题

html - CSS calc() 精度问题

问题描述

计划：

我想在网页上安排 3 件事，这样安排，中间没有间隙：

图 1

它们在同一个父容器下，所有 3 个都是父容器的 50% 宽度。

现实：

我使用 calc() 根据它们各自的纵横比和宽度来计算 padding-bottom

3:2 块：

width: 50%;
padding-bottom: calc(100% * 2 / 3);

15:7 街区：

width: 50%;
padding-bottom: calc(100% * 7 / 15);

5:1 块：

width: 50%;
padding-bottom: calc(100% / 5);

图 2

结果几乎是完美的，除了 3:2 块的高度为 409.083px 并且其他两个块的高度之和为 286.35 + 122.717 = 409.067px 短 0.016px。但是数学是正确width*2/3 == width*7/15 + width/5的，因为它们三个的宽度都是 613.633px。

因为在这 3 个之后我有更多的块，所以这个错误弄乱了它们下面的整个布局。

有没有办法让 calc() 给出准确的结果，或者有没有更好的方法让这种布局成为可能？谢谢！

标签： htmlcss

解决方案

你能提供一个显示你的实现的片段吗？它似乎按我的预期工作，第二个和第三个块的总填充等于第一个块的填充。请参阅附加的片段以查看我的结果。

你的身高是0吗？此外，请检查您是否还设置了任何边距或边框，因为这些属性可能会影响您的对齐方式。

.wrapper::after {
	content: "";
	display: table;
	clear: both;
}

.block {
	float: left;
	height: 0;
	width: 50%;
}

.block--3-2 {
	padding-bottom: calc(100% * 2 / 3);
	background: blue;
}

.block--15-7 {
	padding-bottom: calc(100% * 7 / 15);
	background: red;
}

.block--5-1 {
	padding-bottom: calc(100% / 5);
	background: green;
}
<div class="wrapper">
  <div class="block block--3-2">3-2</div>
  <div class="block block--15-7">15-7</div>
  <div class="block block--5-1">5-1</div>
</div>

推荐阅读