사이드 바는 사용 가능한 모든 공간을 채 웁니다.

나는 이것을 모든 곳에서 찾았지만 해결책을 찾을 수없는 것 같습니다. 어쩌면 그것은 지옥처럼 쉽지만 어쨌든 나는 그것을 보지 못합니다. 중간에 로고가있는 페이지 상단에 배너가 있습니다. 이 로고의 왼쪽과 오른쪽에 두 개의 (다른) x 반복 배경 이미지가 필요합니다. 그래서 같이 :사이드 바는 사용 가능한 모든 공간을 채 웁니다.

div.banner_container { 
    height: 60px; 
    width: 100%; 
    text-align:center; 
} 
div.banner_right { 
    height: 60px; 
    float:right; 
    background: url(img/banner_right.png) repeat; /* This is a */ 
} 
div.banner_left { 
    height: 60px; 
    float:left; 
    background: url(img/banner_left.png) repeat; 
} 
div.banner_logo { 
    height: 60px; 
    width: 500px; 
    margin: 0px auto; 
    background: url(img/banner.png) no-repeat center; 
}

내가 왼쪽으로 남아있는 모든 공간을 채우기 위해 중앙과 왼쪽과 오른쪽 부분에 갈 수있는 로고가 필요합니다

<div class="banner_container"> 
    <div class="banner_right"></div> 
    <div class="banner_logo"></div> 
    <div class="banner_left"></div> 
</div>

내가 미리 알고있는 모든 스타일은 다음과 같다 맞아. 내가 어떻게 이걸 얻을 수 있니?

출처

2011-04-09 Robbert

다른 해결책을 지적하기 위해 위치 절대 값 http://jsfiddle.net/Khez/yVhsY/을 사용합니다. 일반적으로 float를 사용하는 것을 싫어하기 때문에.

이러한 종류의 요청을 처리하는 방법은 여러 가지가 있습니다.

출처

2011-04-09 11:39:58 Khez

매력처럼 작동합니다, 감사합니다! – Robbert

항상 즐겁게 도와주세요 ^^ – Khez

귀하의 요구에 적합한 해결책이 될 수 있을까요? http://jsfiddle.net/8BqH4/

Mac 용 Firefox 3.6 및 Chrome 10에서만 테스트되었습니다.

출처

2011-04-09 11:31:20 AJJ

로고 밑에는 900px와 같은 고정 너비가있는 콘텐츠가 있습니다. 사이드 바의 너비 (사용하는 20 %)를 강요하면 로고와 콘텐츠가 표시되지 않습니다. 더 이상 정렬 될 수 있습니까? – Robbert

사이드 바에 오버레이 역할을하는 내 예제 인 outer_logo div를 확인하십시오. – Khez

동일한 열 레이아웃을 구현하지 않고도 헤더와 수평으로 정렬 된 내용을 가질 필요가 있다면 Khez 솔루션이 더 좋습니다. – AJJ

사이드 바는 사용 가능한 모든 공간을 채 웁니다.

답변

관련 문제