使用CSS在子div之间划分元素的宽度 [英] Divide Width of Element Between Child Divs With CSS

问题描述

我有不同数量的inline-block div，我想要共同占用他们的父母的100％。可以在不使用JavaScript的情况下进行 吗？我可以想到的唯一方法是使用表，但是使用表只是为了布局目的当然是不好的做法。

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

我也试过了 {display：block; float：left;

解决方案

您可以使用 display：table-cell 在你的内部div。对于浏览器来说，内部div的行为类似表格单元格，它也需要两层包含元素：一个充当表，另一个充当表行。

对于这样的结构：

 < div class =outer> 
< div class =middle> 
< div class =inner> Item 1< / div> 
< div class =inner>第2项< / div> 
< div class =inner>第3项< / div> 
< div class =inner>项目4< / div> 
< / div> 
< / div> 
  

使用此CSS：

  div.inner {display：table-cell;} 
 div.outer {display：table;} 
 div.middle {display：table-row;} 
  

一个很好的结构是使用一个UL包装在一个DIV：DIV作为一个表，UL作为一行，以及LI作为表格单元格。

这种技术在旧版浏览器中不能很好地支持 - 对于IE8以前的版本，你完全没有运气。 p>

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

I have a varying number of inline-block divs that I want to collectively take up 100% of their parent. Can this be done without JavaScript? The only way I can think of is with a table but it's of course bad practice to use a table solely for layout purposes.

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

I have also tried { display:block; float:left; } but it doesn't seem to make a difference.

解决方案

You can use display:table-cell on your inner divs to do this. For the browser to make the inner divs behave like table cells, it also needs two layers of containing elements: one to acts as the table, and another to act as the table-row.

For a structure like this:

   <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>

Use this CSS:

div.inner {display:table-cell;}
div.outer {display:table;}
div.middle {display:table-row;}

A nice structure to use is a UL wrapped in a DIV: the DIV acts as a table, the UL as a row, and the LI's as table-cells.

This technique is not well supported in older browsers - for anything older than IE8, you're out of luck entirely.

Let me know if you need more sample code than that!

这篇关于使用CSS在子div之间划分元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！