我有一个950px宽的盒子。
在此框中，我希望最多有四个可能的列。
当使用所有四列时，每列应占用大约25％的空间。
然而，当只使用三个时，我希望它们扩展到占用33.33 ..％或者当只使用两个列时我想要每个占用50％，如果使用了一个我希望它采取占据了100％的空间。
由于我试图实现的动态特性，我不能使用标准的固定宽度四列布局。
贝娄是我迄今取得的成就。这导致列堆叠在彼此之上。正如我所说，我不能有任何固定宽度的列，因为它们需要能够根据其中的内容进行扩展和折叠。
.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>
答案 0 :(得分：1)
使用CSS执行此操作的最简单方法是使用display: table / display: table-cell。添加table-layout: fixed ensures 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: table is not supported。
有一个JavaScript polyfill可用于修复IE7：http://tanalin.com/en/projects/display-table-htc/
答案 1 :(得分：0)
我认为你用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>