내 HTML 템플릿에서 div가 겹치지 않습니까?

내 웹 사이트 템플릿을 디자인하고 있습니다. 나는 divs를 배치하고 각각의 높이와 너비를 지정합니다.내 HTML 템플릿에서 div가 겹치지 않습니까?

main_cont라는 대형 컨테이너 div가 있습니다. 'main_cont'내에 'cont_left', 'cont_center'및 'cont_right'라는 3 개의 컨테이너 div가 있습니다. 해당 div의 각 div에는 left_1, left_2, left_3, center_1 등의 세 div가 있습니다.

div가 left_1, left_2, left_3 등의 div에 자유롭게 추가하고 싶지만 싶지 않습니다. 계속 크기를 조정해야합니다. 지금 나는이 모든 div를 배치 할 때 화면의 오른쪽에있는 것처럼 보입니다.

어떻게 위치를 지정하고 해당 위치에 유지하지만 겹치지 않고 세로로 크기를 조정할 수 있습니까?

출처

2010-01-04 Phil

960 Grid System과 같은 것을 사용해야합니다. 주요 브라우저가 올바르게 해석 할 수 있도록 깨끗한 CSS 규칙을 작성해야하는 부담을 없애줍니다. 이를 통해 레이아웃을 강조하는 데 드는 시간을 줄이고 진행 시간을 늘릴 수 있습니다. 그것의 소리에서

, 레이아웃은 다음과 같이 보일 것이다 :

<div id="main_cont" class="container_12"> 
    <div id="cont_left" class="grid_3"> 
    <!-- Left Column --> 
    <div id="left_1"></div> 
    <div id="left_2"></div> 
    <div id="left_3"></div> 
    </div> 
    <div id="cont_center" class="grid_6"> 
    <!-- Center Column --> 
    <div id="center_1"></div> 
    <div id="center_2"></div> 
    <div id="center_3"></div> 
    </div> 
    <div id="cont_right" class="grid_3"> 
    <!-- Right Column --> 
    <div id="right_1"></div> 
    <div id="right_2"></div> 
    <div id="right_3"></div> 
    </div> 
    <div class="clear"></div> 
</div>

또 다른 좋은 사례는 left_1 그들의 시각적 표현에 따라 하지 이름 요소이다. 레이아웃이 변경 될 수 있으므로 앞으로 식별자가 잘못 표시 될 수 있습니다. 대신, 그들의 목적이 무엇인지와 관련된 이름을 부여하십시오 (예 : navigation_1).

출처

2010-01-04 00:22:24 Sampson

내 HTML 템플릿에서 div가 겹치지 않습니까?

답변

관련 문제