블록을 왼쪽에서부터 블럭에 올리는 우아한 방법이 있습니까

Question

설명이 약간 혼란 스럽지만 더 잘 설명하는 방법이 없습니다.

개략적으로 그것은 본다

및 레이아웃이

으로 정의된다

같은

<div id="outer_a"> 
    <div id="a1"></div> 
    <div id="a2"></div> 
</div> 

<div id="outer_b"> 
    <div id="b"></div> 
</div> 

jsfiddle 데모 : 나는 가고 시안 블록하는 데 유용한 솔루션을 필요로 http://jsfiddle.net/D3Ftp/

황색 직후에 모양이 보일 정도로

결과적으로

제한 사항 : 레이아웃을 변경할 수 없습니다. 음, 사소한 변경은 허용되지만 왼쪽에 div가있는 2 블록과 오른쪽 div에있는 다른 블록이 있어야합니다.

내 솔루션은 끔찍합니다 - margin-left: -52px;.

그 자체로는 끔찍한 것이지만, 왼쪽 블록이 존재하지 않을 수도 있습니다.이 경우 파란색은 정상적인 흐름과 같이 작동해야합니다.

아이디어가 있으십니까?

Answer 1

귀하의 한계를 고려할 때 귀하의 솔루션이 끔찍하다고 생각하지 않습니다. 나는 단순히 할 것이다 : #outer_a가 존재하지 않거나, 그렇지 않으면

Answer 2

나는 당신의 바이올린에 업데이트를했습니다 :

http://jsfiddle.net/D3Ftp/1/

여기에 업데이트 된 CSS의 :

#b { 
    width: 50px; 
    height: 20px; 
    background-color: cyan; 
    position: relative; 
} 

#outer_a ~ #outer_b #b { 
    left:-100%; 
} 

left 스타일에만 적용됩니다, #outer_a이 #outer_b 다음 경우. 시도하고 바이올린의 첫 번째 div 블록을 제거하고 마법 :

편집을 참조하십시오 내가 비율을 사용하고 경우, #outer_b의 폭이 귀하의 요구 사항에 따라 변경되지 않습니다, 참조하십시오. 특정 요구 사항에 대해 marign-left:-Ypx;보다 더 좋은 해결책이 있다고 생각하지 않습니다.