@ioseogio

Что за магия с относительными размерами элементов HTML CSS?

Делаю в блоке .container три дочерних .box
Для .box задаю ширину 30% и отступ справа в 5%, каждому третьему .box обнуляю отступ справа.

В результате чего должно выйти следующее:
5b8c06e6a4352181519999.png

Но три блока не влазят, и происходит перенос на следующую строчку.
Что сделать чтобы это работало, как должно работать?

P.S: рамки тут ни при чем, пробовал убирать, и результат тот же.

UPD: Если сделать, чтобы 3 блока влезло в одну строку, то при приближении к определенному размеру экрана они все равно переносятся на новую, хотя ширина и отступы указаны в процентах.

UPD2:
CSS:
.container
{
		text-align: left;
		border: 1px solid red;

		.box 
		{
			display: inline-block;
			width: 30%;
			margin-right: 5%;

			border: 1px dashed black;
			min-height: 100px;
		}

		.box:nth-child(3n)
		{
			margin-right: 0;
		}
}


HTML:
<main class="container">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</main>
  • Вопрос задан
  • 465 просмотров
Решения вопроса 1
У блоков с display: inline-block есть свои отступы, их надо убрать, указав контейнеру font-size: 0;

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@bini1988
Между inline элементами по умолчанию всегда есть пробельный символ, как его убрать выше уже подсказали, альтернатива использовать float или flex-box
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы