일부 브라우저에서는 Divs가 나란히 앉아 있습니다.

Question

두 div를 나란히 놓으려고합니다. 내 컴퓨터의 Safari 및 Firefox에서는 올바르게 표시됩니다. 그러나 내 클라이언트의 컴퓨터 (Safari를 사용하는 경우)에서 중복됩니다. I가 없거나 잘못 코딩 무언가가

#content 
{ 
    clear: left; 
    float: left; 
    width: 715px; 
    padding:0; 
    margin: 41px 0 0 152px; 
    display: inline; 
} 
#aside 
{ 
    min-height: 850px; 
    float: right; 
    width: 280px; 
    padding: 50px 40px 0 40px; 
    margin: 0px 150px 0 65px; 
    display: inline; 
    position:absolute; 
} 

있습니까 : 여기

내 CSS입니까? 저는 웹 개발자는 아니지만 상당히 간단한 페이지를 작성해야합니다.

미리 감사드립니다. 이것은이다 :

Answer 1

당신이 단순하고 간단 뭔가 (#content 및 #aside 두 형제 div가있는 가정)합니다 ... 여기

#content, #aside { 
    float: left; 
} 

#content { 
    background: red; 
    width: 150px; 
    height: 150px; 
} 

#aside { 
    background: orange; 
    width: 280px; 
    height: 150px; 
} 

<div id="content"></div><div id="aside"></div>

는 Fiddle가

주를 입증하기 위해입니다 필요한 솔루션에 적합하지 않은 간단한 솔루션. CSS 디스플레이 및 위치 속성에 대한 연구를 제안합니다.

Answer 2

표시 속성을 display : inline-block으로 변경하면됩니다. div를 나란히 놓고 싶다면 div를 플로팅 할 필요가 없습니다.

#content 
{ 
    width: 715px; 
    padding:0; 
    margin: 41px 0 0 152px; 
    display: inline-block; 
} 
#aside 
{ 
    min-height: 850px; 
    width: 280px; 
    padding: 50px 40px 0 40px; 
    margin: 0px 150px 0 65px; 
    display: inline-block; 
    position:absolute; 
} 

디스플레이 인라인 그것은 어떤 DIV의 폭이나 높이를 간주하지 않을 것이다. display : inline을 설정하면 폭이나 높이를 고려하지 않는 "span"처럼 작동합니다.

디스플레이 : 인라인 블록 모든 div의 너비 또는 높이를 나타냅니다. display : inline-block을 설정하면 인라인 될 것이고 div의 폭과 높이를 고려하게 될 것입니다.