CSS : 두 개의 플로팅 요소가 겹치도록 만들기

Question

컨테이너 내에 두 개의 div가 있습니다. 하나는 왼쪽으로 뜨고 하나는 오른쪽으로 떠 다닙니다. 둘 다 컨테이너와 같은 약 60 %의 넓이를 가지며 중간에 겹쳐 지도록 설계되었습니다 (오른쪽 div가 우선 순위 임).

일반적으로 플로팅 요소처럼 세로로 겹치지 않고 겹치게하려면 어떻게해야합니까? 올바른 요소를 absoultely하게 배치하면 포함 div가 내용에 맞게 확장되지 않습니다.

코드 (자신의 서버 만 기압 읽기로 불행하게도 나는이 jsfiddle 수 없습니다) : 당신은 절대 위치로 된 div를 작성하고 당신이되고 싶은 사람에 긍정적 인 Z-인덱스를 추가 할 수

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: right; 
} 

Answer 1

사용 권리 박스 중첩되도록 허용되기 때문에 좌측 박스에 부정적인 margin-right :

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: left; 
    margin-right:-104px; 
} 

104 개 개의 픽셀은 테두리 4 픽셀 플러스 오버랩 양이다.

여기는 jsfiddle입니다.

Answer 2

앞.

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
    position: relative; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    z-index: 1; 
} 

Answer 3

위치 지정 만하면됩니다.

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
    position: relative; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 2; 
} 

Answer 4

이 하나를 시도

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 
<style> 
#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    margin-left: 150px; 
    position: absolute; 
} 
</style> 

Answer 5

어떻게 부정적인 여백 권리 사업부를 당기에 대해. 이 같은?

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    position: relative; 
    width: 400px; 
    height: 110px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    height: 100px; 
    border: 1px solid green; 
    float: left; 
} 

#right { 
    position: relative; 
    float: right; 
    width: 250px; 
    height: 100px; 
    top: -100px; 
    border: 1px solid red; 
} 

Answer 6

두 용기가 너무 커지도록합니다. 그런 다음 상대 위치와 왼쪽 위치를 사용하십시오 : -100px 또는 오른쪽에있는 값을 사용하십시오.

Answer 7

추가 div를 추가 할 수 있습니까?

<div id="container"> 
    <div id="left"> 
     <div id="left-inner">left</div> 
    </div> 
    <div id="right">right</div> 
</div> 
<style> 
#container { 
    width: 400px; 
} 

#left { 
    float: left; 
    width: 0px; 
    overflow:visible; 
} 

#left-inner { 
    float: right; 
    width: 250px; 
} 

#right { 
    width: 250px; 
} 
</style> 

Answer 8

우수한 솔루션 :

MARGIN-LEFT:100px... 

== 또는 이와 유사한 명령 : http://jsfiddle.net/A9Ap7/237/

그래서, 사용을하지 말아.
문제는 왼쪽 요소의 크기가 변경되거나 창 크기가 변경되면 문제가 발생한다는 것입니다. 그래서 이런 커스텀의 더러운 "속임수"를 사용하지 말고 html 내부의 일반적인 구조를 만들어서 자연스럽게 정렬해야합니다.