div 오른쪽 중심 div에 대해

Question

html/CSS를 사용하여 내부에 두 개의 이미지가있는 div를 세로 가운데에있는 (오른쪽/왼쪽 여백이 자동으로 설정된) 바깥 쪽 하단 오른쪽에 배치하려고합니다. 그러나 400px 내부에 많은 물건으로 가득 찬 넓은 div. 나는 내가 원하는 것을 정확히 얻을 수없는 것 같습니다.

여기에 내가 얻으려고하는 것은 창문이 너무 넓 으면 녹색 상자가 빨간색 상자 옆에 두 상자 오른쪽에있는 빈 공간이 있습니다. 창이 충분히 넓지 않은 경우 사용자는 녹색 상자를 보려면 오른쪽으로 스크롤해야합니다. 난 그냥이 몇 가지 아주 쉽게 솔루션을 누락처럼

desired layout

는 느낌. 녹색 상자를 오른쪽으로 정렬하고 녹색과 빨간색 사이에 빈 공간을 배치하기 때문에 플로트가 작동하지 않습니다. 나는 'position'CSS 배열을 다양하게 시도했지만 빨간색 상자 바깥에있는 녹색 상자를 원했습니다.

EDIT (자세한 내용은이 요청되었다) : 나는 빨간색 상자 (#main)의 상대 위치 및 절대 녹색 (#sub 수신) 위치를 만드는 시도

. 다양한 왼쪽 : px, right : px 좌표로 놀았지만 빨간색 상자 바깥쪽에 보이지 않게되었습니다. 정렬 태그와 결합 된 다양한 위치 태그 조합을 시도했습니다. 나는 인라인 블록을 시험해 보았다.

그런 다음 더미 래퍼 상위 div를 만들기 위해 무언가를 읽으려고 했으므로 위치 관계식/절대 위치로 실험하려고 시도한 # 래퍼를 만들었지 만 빨간색 블록 위의 레이아웃이 엉망이되었습니다. 정말로 단지 배너와 h1).

게시 할 실제 코드가 없지만 뭔가를 시도해도 작동하지 않을 때마다 태그를 삭제하여이 여분의 CSS를 혼동하지 않을 것입니다. 나는 며칠 동안이 작은 일을 지금 해왔다. 지금 내 코드는 이미 약간 비트는 이전의 시도에서 남은된다

#main {width:400px; 
margin-left: auto; 
margin-right: auto; 
padding-bottom:0px; 
overflow:hidden;} 

#sub {right:-10px; 
bottom:100px; 
float:right;} 

Answer 1

HTML

<div id="bigbox"> 
    <!-- content goes here --> 
    <div id="littlebox">SomeImages</div> 
</div> 

CSS

#bigbox { 
    width: 900px; 
    margin: 0 auto; 
    position: relative; 
} 

#littlebox { 
    width: 150px; 
    position: absolute; 
    bottom: 5px; 
    right: -160px; // width + a 10px margin if desired 
} 

http://jsfiddle.net/eLT9U/1/

Answer 2

http://jsfiddle.net/ferne97/MDWWu/

HTML

<div class="wrap"> 
    <div class="container"></div> 
    <div class="box"></div> 
</div> 

여백에서 왼쪽으로, 그 예제가 될 수 있도록 다음, 그 위에 어떤 추가 마진을 추가 절반으로 콘텐츠 영역을 분할에 대한 CSS

.wrap { 
    position: relative; 
} 

.container { 
    width: 200px; 
    min-height: 420px; 
    margin: 0 auto; 
} 

.box { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    margin-left: 120px; /* half .container width + extra margin */ 
} 

200/2 = 100 + 20px margin = 120px