DIV가 다른 사람보다 아래에 표시됩니다. Chrome에만 적용

Question

테이블을 사용하지 않고 긴 목록을 세 열로 가져 오려고했습니다. 이 목록은 섀도 상자에 표시되어 표시됩니다. 그러나 세 번째 DIV (float right DIV)는 Chrome의 나머지 두 개 아래에 표시되지만 Safari, FF 또는 IE에는 표시되지 않습니다. 이 문제에 대한 설명이 있습니까? 내가, 인라인 블록하지 않고 그것을 시도 위치했다 *

<div style="float: left; width: 30%; position: relative;display: block;"> 

<P class="list">Aareon</p> 
<P class="list">ABC Systems and Development</p> 
...ect 
</div> 


<div style="float: left; width: 30%; position: relative; display: inline-block;"> 

<P class="list">EDS</p> 
<P class="list">Electoral Office</p> 
...ect 
</div> 

<div style="float: right; width: 30%; position: relative; display: inline-block;"> 
<P class="list">Pfizer Adams</p> 
<P class="list">Philips Electronics</p> 
...ect 
</div> 

CSS

P.list {margin:5px 0px; line-height:16px;padding-left:10px;text-indent:-7px} 
P.list:before {content:url('../images/bullet.png');position:relative;left:-3px 
} 

: 상대와 그림자 상자 팝업을 증가 여기

몇 가지 코드 - 최대 크기. * 섀도 상자의 코드는 다른 페이지에서도 작동하므로 문제가 없습니다.

Answer 1

모든 DIV를 연속으로 배치하려면 부동 소수점 DIV가 100% 너비를 공유해야합니다. 이 경우 , 당신은 그래서 당신의 폭이되고, 각 DIV에 30%를 할당하고 각 P 태그에 padding-left:10px 추가

DIV width = 30% + 10px 

그래서 먼저 각 DIV의 폭을 검사하고 width (%)을 조정 시도하거나을 줄이기 위해 시도 패딩 왼쪽 값. FLOAT을 사용하는 경우 표시 속성 값이 필요하지 않습니다.

EDIT : CSS 재설정 클래스를 사용하여 각 HTML 태그의 불필요한 여백과 패딩을 극복하여 html 태그를 재설정합니다.

Answer 2

너비는 백분율이며, 여백과 여백은 px입니다. 백분율로 표시된 너비는 나중에 브라우저에서로드됩니다. 모든 브라우저의 뷰포트 너비가 다르므로 그 결과가 변경됩니다. 또한 마진과 패딩을 백분율로 사용해야합니다.

Answer 3

패딩이 전체 너비를 내고 있습니다. 이 두 가지 팁을 사용하여 문제를 해결할 수 있습니다.

div 중 하나는 float이 필요하지 않습니다. 나머지 div는 다른 것의 왼쪽이나 오른쪽으로 플로트되기 때문입니다. 그것은 어떤 문제가되지 않습니다하지만 그냥 떠 다니는없이 왼쪽 div 및 다른 두 float : 시도하고 오른쪽 두 divs에 대한 HTML 왼쪽 div 앞에 있는지 확인하십시오.

가 쉽게 크기 조정을하려면 폭으로 하나 개의 사업부 세트를 가질 수있다 : 그것은 30에서 이유를 자동 그것은 다른 div의 난이 그런 일 줄 알았