我有不同数量的内嵌块div,我想集体占用他们父母的100%。这可以在没有JavaScript的情况下完成吗?我可以想到的唯一方法是使用表格,但是当然不好的做法是仅使用表格进行布局。
|----------------------| |{ div 1 }{ div 2 }| or |{div 1}{div 2}{div 3}| |----------------------|
我也试过{display:block;浮动:左; }但似乎并没有什么不同。
解决方法
您可以在内部div上使用display:table-cell来执行此操作。为了使浏览器使内部div像表格单元格一样,它还需要两层包含元素:一个用作表,另一个用作表格行。
对于这样的结构:
<div class="outer"> <div class="middle"> <div class="inner">Item 1</div> <div class="inner">Item 2</div> <div class="inner">Item 3</div> <div class="inner">Item 4</div> </div> </div>
使用此CSS:
div.inner {display:table-cell;} div.outer {display:table;} div.middle {display:table-row;}
一个很好的结构是使用DIV封装的UL:DIV作为表,UL作为一行,LI作为表格单元。
这种技术在旧版浏览器中不太受支持 – 对于比IE8更老的任何东西,你完全不幸。
如果您需要更多的示例代码,请告诉我!