0

В контейнере с width:100px несколько блоков со свойствами float:left; border:1px solid black;width:23px; при 100% масштаба видим 4 блока в ряд, но как только масштабируем блоки съезжают, и их становится 3 в ряд, почему? Как я понял проблема в border, но как ее избежать?

2 ответа 2

3

Попробуйте для блоков с бордерами задать box-sizing: border-box; -moz-box-sizing: border-box; /* Для Firefox */ и width:25px

1

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
.wrapper{
	width:100px;
	margin:20px auto;
	display:block;
	clear:both;
}
.wrapper:after{
	content:'';
	display:block;
	clear:both;
}
.wrapper div{
	float:left;
	width:25%;
	height:50px;
	border:1px solid red;
}
.wrapper div:first-child{
	background:blue;
}
.wrapper div:nth-child(2){
		background:lightblue;
}
.wrapper div:nth-child(3){
		background:green;
}
.wrapper div:last-child{
  background:lightgreen;
  }
<div class="wrapper"> 
   <div class=""></div>
   <div class=""></div>
   <div class=""></div>
   <div class=""></div>
</div>

Вот смотрите , выше ответ и мой указывают на box-sizing:border-box;и блоки при фиксированном размере не может съужаться

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.