3

我有一个 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>
4

2 回答 2

1

使用 CSS 执行此操作的最简单方法是使用display: table/ display: table-cell。添加table-layout: fixed 确保等宽列。

这是您的 HTML 示例：http://jsfiddle.net/thirtydot/N4BUh/（或fullscreen）

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

这种技术的唯一缺点是IE7display: table 不支持。

有一个 JavaScript polyfill 可以修复 IE7：http ://tanalin.com/en/projects/display-table-htc/

于 2012-05-22T21:15:08.550 回答
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>
于 2012-05-22T20:37:55.383 回答