Dimensionamento de caixa não funciona

StackOverflow https://stackoverflow.com//questions/25091661

  •  02-01-2020
  •  | 
  •  

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>
Foi útil?

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top