Размер коробки: рамка не работает

Итак, у меня есть контейнер div с фиксированной шириной и высотой и с помощью jQuery для создания в нем разделов сетки на основе ввода. Проблема в том, что мне нужны границы на сетке, и они добавляют пространство, поэтому divs не помещаются внутри контейнера. Я нашел размер окна: border-box свойство, но по какой-то причине он ничего не делает. Первоначально я думал, что, возможно, мне нужен -webkit- префикс, поскольку я использую Chrome, но это не так.Размер коробки: рамка не работает

Любая помощь? Имейте в виду, я только начал учиться.

HTML:

<DOCTYPE html> 
<html> 
    <head> 
     <title>jQuery Sketch-pad</title> 
     <link rel="stylesheet" href="css/sketch-pad.css"> 
    </head> 
    <body> 
     <div id="container"> 

     </div> 

     <button id="clear-grid">Clear grid</button> 

     <script src="js/jquery-3.1.0.min.js"></script> 
     <script src="js/sketch-pad.js"></script> 
    </body> 
</html>

CSS:

#container { 
    margin: 30px auto; 
    border: 1px solid red; 
    height: 960px; 
    width: 960px;  
} 

#container > div { 
    border: 1px solid black; 
    display: inline-block; 
    box-sizing: border-box; 
} 

.hovered { 
    background-color: black; 
}

источник

2016-08-11 rizbo61

Ваша ширина исправление в #container не во внутренних Див-х.

box-sizing:border-box хорошо работает, когда вы определяете ширину закрепления на них, поскольку они должны знать, что является максимальной шириной контейнера.

Если вы определите box-sizing:border-box на #container, то вы увидите, что он работает, но вам нужно определить ширину на внутренних div's, чтобы сделать box-sizing:border-box работающих.

Прочитайте это для справки: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

источник

2016-08-11 09:47:56

Хорошо, но я не могу использовать фиксированную ширину на внутренних дивы, потому что их ширина изменяется в зависимости от того, сколько из них будет в сетке (на основе моего входа). Поэтому в основном единственное, что я могу сделать, это использовать 'outline' вместо' border', правильно? – rizbo61

Размер коробки: рамка не работает

ответ

Смежные вопросы