플로팅 : DIV 사용 중 문제가 발생 했습니까?

Question

테이블에 2 열과 같이 2 Divs를 나란히 정렬하는 데 문제가 있습니까? 때로는 올바르게 정렬되지만 오른쪽 div가 왼쪽 div 아래에 표시되는 경우 div가 원래 위치로 돌아 오는 페이지가 새로 고쳐 지기도합니다.

어떻게 div가 항상 나란히 표시되도록 구성 할 수 있습니까?

감사

box model

에 대한

Answer 1

읽기 일반적으로 당신 때문에 폭을 변경하여 DIV 내부 패딩의 문제가있는 것입니다. div가 공간에 맞추기에 너무 넓어지면 div 아래에 앉을 것입니다.

예를 들어 너비가 200 픽셀 인 두 개의 div가있는 경우

중 하나에서 패딩을 5px로 설정하면 실제 너비는 210px가됩니다 (브라우저에 따라 다름).

하지만 여러 가지 이유가있을 수 있습니다.

Answer 2

당신이 당신의 방문자가이 일 아민 될 화면의 크기를 제어 할 수 없기 때문에이 동작을 받아 더 나은 것 당신의 레이아웃 등 휴대 전화

Answer 3

을 같은 장치를 우아하게 저하 될 수 있습니다 문제는 너비입니다. 떠 다니는 왼쪽과 함께 2 div가 좁은 부모를 만났을 때, CSS 사양에 의해 오른쪽 끝이 뒤덮입니다.

Answer 4

난 당신이

CSS Swag: Multi-Column Lists

Faux Absolute Positioning

그들은 '플로트'속성을 이해하기 정말 helpfull 있습니다 alistapart.com에서이 두 위대한 기사를 읽고 추천합니다.

Answer 5

div가 너무 커서 한 줄에 들어갈 수없는 경우에는 표시되지 않습니다. 따라서 픽셀 값을 사용하고 화면의 너비가 충분하지 않으면 작동하지 않습니다. 하지만 서로 47 % 같은 상대 너비를 사용하는 경우에는 창 크기에 따라 크기가 줄어들 기 때문에 항상 서로 맞는 크기가 될 수 있습니다. 이제 둘 다 20px 너비라면 좀 이상하게 보일 수도 있지만, 이것은 항상 서로 옆에 있다는 것을 보장합니다. : D

Answer 6

부동 div를 만들 때 중요한 것은 "float"및 "width"속성을 설정하는 것입니다.

<div style="float:left;width:100px">Left Div</div> 
<div style="float:left;width:100px">Middle Div</div> 
<div style="float:left;width:100px">Right Div</div> 
<div style="clear:both;">Bottom Div</div> 

가 발생합니다 :

============================================== 
| Left Div | Middle Div | Right Div | 
|    |    |    | 
|    |    |    | 
|    |    |    | 
|    |    |    | 
============================================== 
|     Bottom Div     | 
============================================== 

당신이 작은 창으로 브라우저의 크기를 조정하면 div의이 바꿈됩니다. 이는 기본 동작입니다.