2010-01-19 2 views
3

나는 보통 레이아웃을하기 위해 테이블을 사용하고 있습니다. 하지만 Div에서 레이아웃을 시험해보고 싶습니다. 여기에 문제가 있습니다. "div : 왼쪽으로 떠올리게"할 때, 뒤 따르는 div가 함께 떠있게됩니다. 나는 "float : none"을 다음 div에 넣으려고했지만 줄을 끊었지만 작동하지 않습니다.div가 unfloating에서 강제로하는 방법

<hr style="width: 100%;" /> 
<div id="divContainer"> 
    <div id="divLeftPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divCenterPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divRightPane"> 
    ... 
    </div> 
</div> 
<hr style="width: 100%;" /> 

사업부의 사용에 대한 문제가 있습니다 :

여기
<hr style="width: 100%;" /> 
<table> 
    <tr> 
    <td> 
     <div id="divLeftPane"> 
     ... 
     </div> 
    </td> 
    <td> 
     <div id="divCenterPane"> 
     ... 
     </div> 
    </td> 
    <td> 
     <div id="divRightPane"> 
     ... 
     </div> 
    </td> 
    </tr> 
</table> 
<hr style="width: 100%;" /> 

내가 지금까지 DIV 사용 플로트와 시도 것입니다 : 여기

내가 테이블을 사용하여 수행 할 작업입니다 하단
도 왼쪽으로 플로팅됩니다. 나는 마지막 div, HR 태그, 심지어 divContainer에 float : none을 두어 보았습니다. 왜 마지막 시간은 떠 다니는거야?

답변

5

이 당신에게 원하는 효과를 줄 것이다 :

<hr style="width: 100%;" /> 
<div id="divContainer"> 
    <div id="divLeftPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divCenterPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divRightPane" style="float:left; "> 
    ... 
    </div> 
    <div style="clear: left;"></div> 
</div> 
<hr style="width: 100%;" /> 

그들이 나란히 표시 할 것입니다 왼쪽 세 div의 부동을,하지만 당신은 divContainer이 그 안에 div 태그의 높이를 고려하지 않는 것을 알 수 있습니다 . div : clear를 사용하여 div를 추가하면 기본적으로이 작업이 취소됩니다.

편집 : 실제와 같이 할 때는 인라인 스타일을 사용하지 마십시오.

3

속성을 사용

명확 : 왼쪽;

아래쪽 요소에.

1

#divContainer { 
    overflow: hidden; 
} 

최종

에있어서의 여분 DIV없이이를 추가 할
관련 문제