Dimensionamento de caixa não funciona
Pergunta
Estou usando a propriedade box-sizing para alinhar o div esquerdo, o div direito e o div central dentro do div do contêiner.Os divs não estão alinhados.Abaixo está o código que eu tentei.Eu também tentei usar px.Estou usando o Firefox para verificar.
Eu também adicionei no 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>
Solução
.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%;
}
Outras dicas
caixa de fronteira não é caixa de margem (que por sinal não existe :) então é só remover margin:12px;
ou lidar com isso :)
Em esta demonstração acabei de modificar margin:12px;
para que o elemento central margin-top:12px;
(assim como os outros elementos).Se você precisar da margem, faça algumas contas em relação às larguras do seu elemento!
_____ _____________ _____
20% 12px 60% 12px 20%
mesmo usando border-box
termina com uma soma de 100%+24 pixels
O box-sizing:border-box
ou qualquer tamanho de caixa que você esteja usando, o modelo de caixa é
width + padding + border = actual visible/rendered width of an element's box,
height + padding + border = actual visible/rendered height of an element's box.
Veja esta demonstração https://css-tricks.com/box-sizing/#demoadicionar margem em excesso ao filho tornará esta propriedade inútil
Por favor, cheque o violino
<body>
<div class="container">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
</body>
Existem algumas coisas que você deve saber
Total: 100% para o contêiner esquerdo e direito: 20% Centro: 60%
então o total de 100% virá dentro do contêiner
e ainda por cima você deu borda
portanto, ele adicionará 6px extras para os três contêineres, fazendo-o exceder mais do que 100% da largura do contêiner, de modo que a seção direita saltará para baixo.
E para o contêiner central você não deu margem superior
Consulte a modelagem de caixa CSS que você entenderá.e usar o firbug no firefox para depurar será mais fácil.