자 크기 조정 작동하지 않는

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

  •  02-01-2020
  •  | 
  •  

문제

나는 사용자 크기는 속성을 왼쪽 정렬 div,오른쪽 div 및 center div 내에서 컨테이너 div.Div 의하지 않은 정렬입니다.아래 코드고 했다.도를 사용하여 px.내가 사용하는 파이어 폭스를 확인합니다.

또한 추가 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%;
}
.

다른 팁

국 상자 지 익 상자 (어떤 방법에 의해 존재하지 않습니다.:)그래서 그냥 제거 margin:12px; 또 그것을 다룰:)

에 이 데모 나는 그냥 수정 margin:12px; 센터소 margin-top:12px; (다만 다른 요소).해야 하는 경우에 마진이 할 필요가 있는 어떤 수학에 관한 요소의 폭!

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

도를 사용하여 border-box 끝까지 금액의 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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top