Ridimensionamento della scatola che non funziona

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

  •  02-01-2020
  •  | 
  •  

Domanda

Sto usando la proprietà del dimensionamento della scatola per allineare il div sinistro, il div e il div centrale del div e centrale all'interno del div container.I div non sono allineati.Di seguito è riportato il codice che ho provato.Ho anche provato a usare px.Sto usando Firefox per controllare.

Ho anche aggiunto a 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>
.

È stato utile?

Soluzione 

.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%;
}
.

Altri suggerimenti

Border-box non è Margin-Box (che a proposito non esiste :) Quindi rimuovi margin:12px; o affrontare IT :)

in Questa demo ho appena modificato margin:12px; per l'elemento centrale amargin-top:12px; (proprio come gli altri elementi).Se hai bisogno del margine che devi fare un matematico per quanto riguarda le larghezze del tuo elemento! 

 _____    _____________    _____
  20%  12px    60%    12px  20%
.

Anche usare border-box finisce fino a una somma del 100% + 24px

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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top