В контейнере с width:100px
несколько блоков со свойствами float:left; border:1px solid black;width:23px;
при 100% масштаба видим 4 блока в ряд, но как только масштабируем блоки съезжают, и их становится 3 в ряд, почему? Как я понял проблема в border, но как ее избежать?
2 ответа
Попробуйте для блоков с бордерами задать box-sizing: border-box;
-moz-box-sizing: border-box; /* Для Firefox */
и width:25px
*{
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;
и блоки при фиксированном размере не может съужаться