확장 비 고정 폭, 4 열 레이아웃

Question

950px 크기의 상자가 있습니다.

이 상자 내에 최대 4 개의 잠재적 열을 보유하고 싶습니다.

4 개 열 모두를 사용할 때 각 열은 공간의 약 25 %를 차지해야합니다.

그러나 3 개만 사용하는 경우 33.33 %를 차지하도록 확장하거나 2 열만 사용하는 경우 각각 50 %를 사용하고 하나가 사용되고 싶습니다. 공간의 100 %를 차지하십시오.

동적 성질 때문에 표준 고정 너비의 4 열 레이아웃을 사용할 수 없습니다.

내가 지금까지 성취 한 것입니다. 결과적으로 열이 서로 위에 쌓입니다. 앞에서 말했듯이, 확장 된 열은 고정 폭 열을 가질 수 없기 때문에 확장 된 열과 붕괴 할 수 있어야합니다.

.bottomboxwrapper { 
    width:950px; 
    display:block; 
    background-color:#6F0; 
    overflow:hidden; 
} 
.bottomone { 
    float:left; 
    background-color:#CCC; 
    width:auto; 
    display:inline-block; 
    width:auto; 

} 
.bottomtwo { 
    float:left; 
    width:auto; 
    background-color:#999; 
    display:inline-block; 
    width:auto; 

} 
.bottomthree { 
    float:left; 
    background-color:#666; 
    display:inline-block; 
    width:auto; 
} 
.bottomfour { 
    float:left; 
    background-color:#C99; 
    display:inline-block; 
    width:auto; 
} 


<div class="bottomboxwrapper"> 
<div class="bottomone"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p> 
</div> 
<div class="bottomtwo"> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p> 
</div> 
<div class="bottomthree"> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p> 
</div> 
<div class="bottomfour"> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p> 
</div> 
</div> 

Answer 1

하나의 클래스, "하나", "둘", CSS와 함께이 작업을 수행하는 가장 쉬운 방법은 display: table/display: table-cell을 사용하는 것입니다. table-layout: fixedensures equal width columns을 추가하십시오.

는 여기에 귀하의 HTML과 예입니다 : http://jsfiddle.net/thirtydot/N4BUh/ (또는 fullscreen)

.bottomboxwrapper { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 
.bottomboxwrapper > div { 
    display: table-cell; 
} 

를이 기술의 유일한 단점은 IE7에서 그 display: tableis not supported입니다.

IE7 수정 가능한 자바 스크립트 polyfill가있다 : http://tanalin.com/en/projects/display-table-htc/

Answer 2

CSS로 할 수있는 대부분의 작업은 이처럼 열을 중첩하는 것입니다.

.one .col { 
    width:100%; 
} 
.two .col { 
    width:50%; 
} 
.three .col { 
    width:33.33%; 
} 
.four .col { 
    width:25%; 
} 

그의 단점은 당신이 미리 당신이 원하는 얼마나 많은 열을 알고 있고 그래서 같은 HTML에서 클래스 이름 (또는 번호)를 호출해야 할 것입니다 ...하지만 적어도 당신은 단지를 바꿀 것 등

<div class="two"> 
     <div class="col">50% wide</div> 
     <div class="col">50% wide</div> 
    </div> 

    <div class="three"> 
     <div class="col">33.33% wide</div> 
     <div class="col">33.33% wide</div> 
     <div class="col">33.33% wide</div> 
    </div>