CSS cal c () точность вопроса

Question

План:

Я бы хотел, чтобы на веб-странице было 3 вещи, которые должны быть расположены таким образом, без промежутков между ними:

Img 1

Они находятся под одним родителем, и все 3 из них имеют 50% ширины родительского контейнера.

Реальность:

Я использовал cal c () для вычисления отступа на основе их соотношения сторон и ширины

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);

Img 2

Результат почти идеальный, за исключением того, что высота блока 3: 2 составляет 409,083 пикселей, а сумма высот двух других блоков составляет 286,35 + 122,717 = 409,067 пикселей, что на 0,016 пикселей меньше. Но математика верна width*2/3 == width*7/15 + width/5, поскольку все 3 имеют ширину 613,633 пикселей.

Поскольку после этих 3 у меня больше блоков, эта ошибка испортила весь макет под ними.

Есть ли способ заставить cal c () дать точный результат, или есть лучший подход, чтобы сделать возможным этот тип макета? Спасибо!

Answer 1

Можете ли вы предоставить фрагмент, который показывает вашу реализацию? Кажется, он работает, как и ожидалось, с полным заполнением второго и третьего блоков, равным заполнению первого блока. Смотрите прикрепленный фрагмент, чтобы увидеть мой результат.

Ваш рост установлен на 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>