Вопрос
Я использую свойство Box-Sizing, чтобы выровнять Left div, правый div и center div в контейнере div.ДИВ не выравниваются.Ниже приведен код, который я пробовал.Я также пытался использовать PX.Я использую Firefox, чтобы проверить.
Я также добавил в jsfiddle, http://jsfiddle.net/f9ds9/
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width:100%;
}
#left{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#right{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#center{
-moz-box-sizing: border-box;
margin:12px;
float:left;
border:1px solid #000000;
width:60%;
}
</style>
</head>
<body>
<div class="container">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
</body>
</html>
. Решение
.container{
width:100%;
}
#left{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#right{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#center {
-moz-box-sizing: border-box;
border: 1px solid #000000;
float: left;
margin-top: 12px;
width: 50%;
}
. Другие советы
border box не margin-box (который, кстати не существует :) Так что просто удалите margin:12px;
или справиться с ним :)
в margin:12px;
для центрального элементаmargin-top:12px;
(как и другие элементы).Если вам нужен запас, который вам нужно сделать математику относительно ширины вашего элемента!
_____ _____________ _____
20% 12px 60% 12px 20%
.
Даже с использованием border-box
заканчивается до суммы 100% +
The box-sizing:border-box
or whatever box sizing you are using the box model is
width + padding + border = actual visible/rendered width of an element's box,
height + padding + border = actual visible/rendered height of an element's box.
See this demo https://css-tricks.com/box-sizing/#demo adding excess margin to child will make this property useless
Please Check the fiddle
<body>
<div class="container">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
</body>
There are some things which you should know
Total:100% for the container Left and right :20% Center :60%
so total 100% will come inside the container
and on top of that you have given border
so it will add extra 6px for the three container making it exceed more than the 100% width of container so the right section will jump down.
And for center container you have not given margin top
Please refer CSS box modelling you will understand. and use firbug in firefox for debugging it will be easier.