div 태그는

내가 div 태그 사실이 div 태그 정렬하고 하나의 컨테이너에 그룹화 그러나 여기 정말 바보 같은 문제가 뭔가 #footer .col_three 지금 내 코드div 태그는

<html> 
<head> 
<style> 
    body { 
     padding: 0 2%; 
    } 
    #footer { 
    width: 100 %; 
     clear: both; 
     border: 1px solid #CCC; 
    } 
    #footer .col_one { 
     float: left; 
     width: 25%; 
     border: 1px solid #CCC; 
    } 
    #footer .col_two { 
     float: left; 
     width: 25%; 
     border: 1px solid #CCC; 
    } 
    #footer .col_three { 
     float: left; 
     width: 24%; 
     border: 1px solid #CCC; 
    } 
    #footer .col_four { 
     float: left; 
     width: 25%; 
     border: 1px solid #CCC; 
    } 
</style> 
</head> 
<body> 
    <div id="footer"> 
     <div class="col_one"> 
      &nbsp; something here 
     </div> 
     <div class="col_two"> 
      &nbsp; something here 
     </div> 
     <div class="col_three"> 
      &nbsp; something here 
     </div> 
     <div class="col_four"> 
      &nbsp; something here 
     </div> 
     <div style="clear: both"> 
     </div> 
    </div> 
</body> 
</html>

입니다 있습니다와 이상한 문제를 얻을 제대로 정렬되지 너비를 24 %로 만들면 모든 상자가 올바른 순서로 표시되지만 마지막 상자가 첫 번째 상자 바로 아래로가는 이유는 25 %입니다. 왜 그렇습니까? 총 바닥 글 컨테이너는 100 %이고 폭이 각각 25 % 인 네 개의 div 상자가 있습니다. 나쁜 영어를 이해하고 미안하길 바랍니다.

출처

2011-10-17 Keshav Nair

을 이동해야하는 경우 즉, 사용자가 설정 한 폭, 내용의 폭이기 때문이다, 여백, 여백 및 테두리는 제외됩니다. 따라서 총 너비는 100 % + 8px입니다 (4div의 각면에 1px 테두리). 그러므로 적합하지 않을 것입니다.

div에 여분의 div를 넣으면 해결할 수 있습니다. 외부 div는 테두리없이 25 % 넓게 만듭니다. 내부 DIV, 당신은 경계하지만, 명시적인 폭을 줄 수 있으므로 부모를 채울 것입니다 : 그 div의에 별도의 클래스를 바꾸어 선택기을 약간 수정하는 자유를했다

http://jsfiddle.net/GolezTrol/fm7LV/1/

: col one col_one 대신. 이렇게하면 특정 열의 스타일을 지정해야 할 경우를 대비하여 모든 열에 .col 선택기를 사용하고 .col.one 선택기를 사용할 수 있습니다. :)

출처

2011-10-17 17:59:25 GolezTrol

감사합니다. –

경계선을 벗어나고 작업해야합니다. 브라우저는 각 div의 너비를 백분율과 비교하여 픽셀 수를 계산합니다. 당신이 (테두리 포함) 추가 픽셀을 추가 된 div의 전체 폭이 창 너비 다음 다음 더 그들이

#footer{ 
    width: 100 %; 
    clear: both; 
} 
#footer .col_one,.col_two,.col_three,.col_four{ 
    width:25%; 
    float:left; 
}

출처

2011-10-17 17:59:03

답변

관련 문제