유체 및 고정 레이아웃 혼합 - 동적 공간 채우기

Question

유체와 고정 레이아웃을 혼합하는 것이 믿을 수 없을만큼 어렵다는 것을 발견했습니다. 그래서 문제 해결에 대한 해결책을 찾았을 때 잠시 동안 조용히있게되었습니다. 과거에 너무나 도움이 된 공동체와 나눌 수밖에 없습니다.

난 다음보기 원 :

나는 그것이 매우 하나가 포함 DIV에 "margin:0 auto;"CSS 규칙을 적용 할 때 같이해야 의미 역동적 인 공간으로를 공백 좌우 요소의 "동적 공간"은 예제에 있습니다.

1. 이 반응해야했다 :
   나는 6 개 요구했다.
2. 컨테이너의 최대 너비는 960 픽셀이어야하고 항상 가운데 맞춤을해야합니다.
3. 은 IE8 이상에서 작동해야했습니다.
4. 왼쪽의 동적 공간은 다른 높이를 가져야하고 다른 색상을 포함해야합니다.
5. 오른쪽의 동적 공간은 컨테이너가 있지만 다른 색상을 가진 동일한 높이 여야합니다.
6. 트위터 부트 스트랩에서 작업해야합니다.

Answer 1

이 시점에서 나는 3 일 동안 고생했다. 나는 CSS 테이블 셀에서부터 부트 스트랩 컬럼을 사용하여 모든 것을 시도했다.

거대한 화면 크기에서 "동일한"위치에 div를 두는 유일한 방법은 50 %로 만드는 것 뿐이라는 것을 깨달았습니다. 꽤 좋았다

이

JSFIDDLE DEMO

, 유일한 문제는 빨간색 컨테이너 요소 아래에 내밀이었다 :

그래서이 시점에서 나는 다음과 같은했다.

그래서 내 멋진에서 모든 수학하지 뇌에서 걷어 생각했다 :

내 포함 된 요소는 항상 960가 될 것입니다 그리고 난, 같은 위치를 유지하기 위해 50 %로 왼쪽에 내 사업부를 필요로하는 경우 어떤 나는 단순히 960/2 = 480px를 취해서 단순히 margin:-480px을 적용했다.

화면이 약 768px로 내려갈 때까지 훌륭하게 작동합니다. 따라서 미디어 쿼리를 변경하여 margin-left:-370px;으로 변경하십시오.

그리고 마지막으로 일했습니다!

JSFIDDLE DEMO

및 HTML :

<div class="" style="background: #000099; position: relative"> 
    <div class="left">l</div> 
    <div class="container" style="background: #002500">contain</div> 
</div> 

AND FINALLY CSS :이가 너무 오래 죄송 사람을 도움이되기를 바랍니다

.container { 
    max-width: 960px; 
    z-index: 1; 
    position: relative; 
    padding:0; 
} 
.left { 
    position: absolute; 
    left: 0; 
    width: 50%; 
    z-index: 1; 
    background: red; 
    height: 50px; 
    margin-left:-480px; 
} 

@media (min-width: 768px) { 
    .left { 
    margin-left:-375px; /*I Used -370 but for some reason it doesn't work now*/ 
    } 
} 

@media (min-width: 992px) { 
    .left { 
    margin-left:-480px; 
    } 
} 

여기에 최종 코드는 가능한 한 명확하게 논리를 설명하기를 원했습니다.