In a container with width:100px several blocks with float:left; border:1px solid black;width:23px; properties float:left; border:1px solid black;width:23px; float:left; border:1px solid black;width:23px; at 100% of the scale, we see 4 blocks in a row, but as soon as we scale the blocks move out, and they become 3 in a row, why? As I understand the problem in the border, but how to avoid it?
f1amestar f1amestar
94 eight
|
2 answers
Try setting box-sizing: border-box; -moz-box-sizing: border-box; /* Для Firefox */ units box-sizing: border-box; -moz-box-sizing: border-box; /* Для Firefox */ box-sizing: border-box; -moz-box-sizing: border-box; /* Для Firefox */ box-sizing: border-box; -moz-box-sizing: border-box; /* Для Firefox */ and width:25px
Dmitriy Kondratiuk Dmitriy Kondratiuk
1,802 five eleven
|
*{ 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> Look, the answer above and mine point to box-sizing:border-box; and blocks at a fixed size cannot shrink
|