열 1을 옵션으로, 열 3을 최소 너비로 사용하여 3 열 반응 형 디자인을 만드는 방법은 무엇입니까?

Question

과 같은 HTML 레이아웃을 만들고 싶습니다. 가장 왼쪽의 열은 더 높은 화면 크기에만 표시되고 가장 오른쪽의 열은 345px의 고정 너비입니다.

부트 스트랩 3에서는 다음을 시도해 보았습니다.

<div class="container"> 
    <div class="row"> 
     <!--left--> 
     <div class="col-sm-3"> 
     </div> 
     <!--/left--> 

     <!--center--> 
     <div class="col-sm-6"> 
     </div> 
     <!--/center--> 

     <!--right--> 
     <div class="col-sm-3"> 
     </div> 
     <!--/right--> 
    </div> 
</div> 
<!-- /.container --> 

하지만 누적 열을 만듭니다. 어떤 도움이 될 것입니다.

Answer 1

CSS flexbox가 널리 보급 될 때까지 유동적 인 레이아웃을위한 display : table-cell을 좋아합니다. 이 간단한 샘플을 살펴보십시오. http://jsfiddle.net/zn6z3/ 미디어 쿼리를 사용하여 특정 너비의 왼쪽 열을 숨기고 가운데 열은 손실 된 공간을 채우기 위해 확장됩니다.

테이블 셀의 장점은 일부 열에서는 고정 폭을 정의하고 다른 열에서는 고정 폭을 정의 할 수 있다는 것입니다. 너비가 정의되지 않은 열은 테이블 공간을 채우기 위해 확장됩니다. 이는 플로트 기반 레이아웃보다 큰 장점입니다.

여기 & CSS

<div id="page"> 
    <div class="col" id="left">Content</div> 
    <div class="col" id="middle">Content</div> 
    <div class="col" id="right">Content</div> 
</div> 


* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#page { 
    display: table; 
    width: 100%; 
} 
    #page .col { 
     display: table-cell; 
     vertical-align: top; 
     padding: 20px; 
    } 
    #left { 
     width: 150px; 
     background: #777 
    } 
    #middle { 
     width: auto; 
     background: #aaa; 
    } 
    #right { 
     width: 345px; 
     background: #ccc; 
    }