레이아웃을위한 div 태그의 배치

-6

div의 배치를 올바르게 얻으려고 몇 시간이나 노력했습니다. 이제는 전문적인 도움이 필요하다는 것을 알게되었습니다. 레이아웃을위한 div 태그의 배치

enter image description here

화상

은 매우 자명 할 것이다.

출처

2012-03-03 raze

이미지를 추가했지만 * 코드는 어디에 있습니까? 그것이 우리가 당신을 도울 필요가있는 것입니다. [편집]을 클릭하여 HTML과 CSS를 추가하고 코드 서식 도구를 확인하십시오. –

-1

아래 링크는 좋은 아이디어입니다. 나는 모든 배경을 볼 수 있도록 서로 다른 배경색을 설정했습니다. 당신이 가질 수있는 유일한 문제는 당신이 "100 % - 75px"를 할 수 없다는 것입니다. 그래서 나는 그것을 단지 500px로 설정했습니다.

출처

2012-03-03 20:06:09 Andrew

와우, 원래 답변. – Gareth

@Gareth 건설적인 비판에 감사드립니다. [여기에 코드를 올려 놓은 바이올린이 있습니다.] (http://jsfiddle.net/TheWaxMann/Y6ew7/) 사진과 조금 닮지 않습니다. 왼쪽 막대의 높이가 나머지 페이지 높이와 일치하도록 외부 컨테이너 div가 필요합니다. – Andrew

당신은 제 대답을 가지고 제가 지적한 문제에 대한 첫 번째 해결책을 적용하여 자신의 jsFiddle로 게시했습니다. 왜 내가 여기에 더 이상 질문에 대답하지 않는지 상기시켜 줘서 고마워. – Gareth

HTML :

<ul id="menu"> 
    <li>Menu stuff</li> 
    <li>More menu stuff</li> 
    ...More items... 
</ul> 
<div id="header"> 
    ...Header content... 
</div> 
<div class="columns"><!-- This may be a candidate for a UL or an OL --> 
    <div class="column"></div><div class="column"></div><div class="column"></div> 
</div> 
<div id="content"> 
    ...Content... 
</div>

CSS :

#menu {float: left; width: 75px; height:100%;} 
#header {height: 100px;} 
.columns {height: 300px;} 
.column {display:inline-block;width: 33.33%;}

그것은 세 columndiv이 display:inline-block;의 때문에 그들 사이에 나타나는 공백을 중지 함께이야 유지하는 것이 중요합니다.

유일한 실제 문제는 100 % 높이 메뉴 div입니다. float ed (다른 콘텐츠를 75 픽셀 위로 밀어 넣음)이므로 height:100%이 작동하지 않습니다. 두 가지 해결책이에 있습니다

1) 모든 컨테이너 div에 메뉴 바 및 margin-left:75px;

2) 메뉴를 고정 픽셀 높이를주고 있음을주고 놓습니다.

출처

2012-03-03 19:40:02 Gareth

레이아웃을위한 div 태그의 배치

답변

관련 문제