使用CSS在子div之间划分元素的宽度

我有不同数量的内联块div，我希望这些块div全部占据它们的父块的100%。没有JavaScript可以做到这一点吗？我能想到的唯一方法是使用一个表，但是仅仅为了布局的目的使用一个表当然是不好的做法

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

---

我也尝试过

{display:block；float:left；}

，但似乎没有什么不同。

您可以在内部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>

一个很好的使用结构是一个封装在DIV中的UL：DIV用作表，UL用作行，LI用作表单元格

这种技术在较旧的浏览器中没有得到很好的支持——对于任何比IE8更旧的浏览器，您都完全没有运气

---

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

被接受的答案遗漏了一个重要的CSS属性，这是工作所必需的：

表布局：固定

这是正确的答案：

HTML:

---

您可以在这里利用css3优势。我也面临这个问题，现在我已经用下面的示例代码修复了这个问题

。父容器{
填充：0；
保证金：0；
列表样式：无；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
-webkit内容：周围的空间；
柔性包装：nowrap；
-webkit柔性包装：nowrap；
}
.子项{
保证金：5px；
文本对齐：居中；
填充：10px；
背景色：红色；
颜色：#fff；
}

1
2
3
4
5
6
7

我想解释一下@lingeshram的答案。Flexbox已经走了这么远，我认为现在确实是这样做的。如果您必须支持旧浏览器，请务必先检查

.container{
显示：flex；/*或内联flex*/
}
上校{
柔性生长：1；
边框：1px实心#000；
}
.col2x{
柔性生长：2；
边框：1px实心#000；
}

平均分配三个子项
内部1
内部2
内部3


平分两个孩子
内部1
内部2


分成三个孩子，但中间的孩子是其他孩子的两倍大
内部1
内部2
内部3

是否要在不设置百分比的显式

宽度的情况下执行此操作？是的-您需要表格列的显示模式-但这并不意味着您需要将表格添加到HTML中。看到我的答案了…非常感谢Beejamin！我当然没想到FX5.0会表现得像一个“老浏览器”。虽然它不能将它们均匀地分开，但已经足够近了。顺便说一句，如果它在IE中不起作用，谁会在乎呢？；-）@Fantabulum:不要用
显示：表格单元格设置
div
上的
宽度，用
显示：表格设置
表格布局：固定
。这对
li
和
ul
也有效吗？我有一个项目符号列表菜单，我希望
li
s占据整个空间除以元素数。我尝试将
ul
设置为
display:table
，将
li
设置为
display:table单元格
，但没有成功。是否有任何解决方法可以将其保留为项目符号列表？是的，@Shimmy，您需要将列表包装在另一个元素中：包装器是
display:table，ul显示：表格行
，li显示：表格单元格
。我已经编辑了我的答案，以便用当前信息更清楚地说明这一点。@Beejamin，谢谢。成功了。但是，
li
s不是等分的，它们的宽度取决于它包含的文本，有没有办法使元素的宽度彼此相等？（是网站）你能解释一下，到底什么才是使这项工作真正必要的，而不是仅仅写下一些代码吗？
div.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}

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

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