css - 使用 CSS 在子 Div 之间划分元素的宽度

Question

我有不同数量的内联 block div，我希望它们共同占据其父级的 100%。这可以不用 JavaScript 完成吗？我能想到的唯一方法是使用表格，但将表格仅用于布局目的当然是不好的做法。

|----------------------|
|{  div 1  }{  div 2  }|
           or
|{div 1}{div  2}{div 3}|
|----------------------|

我也尝试过 { display:block;向左飘浮; 但它似乎没有什么不同。

Answer 1

您可以在内部 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.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}

一个很好用的结构是将 UL 包裹在 DIV 中:DIV 充当表格，UL 充当行，LI 充当表格单元格。

这种技术在旧版浏览器中没有得到很好的支持——对于任何早于 IE8 的浏览器，你就完全倒霉了。

如果您需要更多示例代码，请告诉我!