Не работает box-sizing

Здравствуйте. Есть след. разметка:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Магазин</title>
</head>
<body>
    <div id="container">
        <div class="cols col-4">Один</div>
        <div class="cols col-4">Два</div>
        <div class="cols col-4">Три</div>
    </div>
</body>
</html>


Есть след. css:

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
}
body{
    font:100%/1.5em Arial,Helvetica sans-serif;
    color:#000;
}
#container{
    width:90%;
    margin:0 auto;
    background:#d2d2d2;
}
#container .cols{
    display:inline-block;
    text-align: center;
    margin:0 0 1em;
    padding:0 1em;
    background:#fd4;
}
.col-1{width:8.333333333333333%;}
.col-2{width:16.66666666666667%;}
.col-3{width:25%;}
.col-4{width:33.33333333333333%;}
.col-5{width:41.66666666666667%;}
.col-6{width:50%;}
.col-7{width:58.33333333333333%;}
.col-8{width:66.66666666666666%;}
.col-9{width:75%;}
.col-10{width:83.33333333333333%;}
.col-11{width:91.66666666666666%;}
.col-12{width:100%;}


Проблема в этом коде в том, что почему-то не срабатывает box-sizing и третья колонка не помещается. Как только ставлю в #container .cols вместj display:inline-block правило float:left все срабатывает как надо.

Код на jsbin.

Почему не работает box-sizing в данном случае?
  • Вопрос задан
  • 5984 просмотра
Решения вопроса 2
iDennis
@iDennis
box sizing сделал своё дело, но при использовании inline-block появляются отступы
Ответ написан
Комментировать
nazarpc
@nazarpc
Open Source enthusiast
При inline-block если в html коде между блоками есть пробел - он покажется, как, например, в обычном тексте.
Потому либо уберите пробелы из html кода, либо используйте flex-box, который именно для этого и предназначен (многострочный Firefox только в последней или предпоследней версии начал поддерживать, с однострочным во всех популярный браузерах проблем не возникает никаких).
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
02 нояб. 2024, в 21:08
2000000 руб./за проект
02 нояб. 2024, в 20:34
40000 руб./за проект
02 нояб. 2024, в 20:05
800 руб./в час