다른 요소에 요소가있는 경우

Question

그래서 헤더가 있고 그 아래에있는 세 개의 요소 상자를 어떻게 코딩해야하는지 잘 모르겠지만 아래 그림과 같이 끝 부분에 표시됩니다.

...

한 가지 방법은, 아마도 위치 절대 마진 탑, 또는 나는 아마도 이미지를 슬라이스한다, 그래서 상자의 상단 헤더 배경 사진입니다

.box { 
    position: absolute; 
    margin-top: -30px; 
} 

아니면 어떻게해야합니까?

Answer 1

다음에 시도한 코드를 게시해야합니다. 나의 더 나은 판단에 반하여 나는 당신이 그린 것을 정확히 만들었다.

http://jsfiddle.net/xD69h/

HTML :

<div id="a"> 
<span id="a-text">A</span> 
<div id="b"> 
    <span id="b-text">B</span> 
</div> 
<div id="c"> 
    <span id="c-text">C</span> 
</div> 
</div> 

CSS :

#a { 
width: 100%; 
height: 150px; 
background-color: #EFE4B0; 
border: 3px solid #FFABCA; 
color: #B97A57; 
} 
#a-text { 
float: left; 
} 
#b { 
width: 200px; 
height: 150px; 
background-color: #7092BE; 
border: 4px solid black; 
border-radius: 5px; 
color: #B97A57; 
float: left; 
margin-top: 50px; 
margin-left: 50px; 
} 
#c { 
width: 200px; 
height: 150px; 
background-color: #B97A57; 
border: 4px solid #B97A57; 
color: white; 
float: left; 
margin-top: 50px; 
}