Css 显示：方框的表格单元格宽度（百分比）

我有这个CSS代码：

section.products {
    display: table;
    width: 100%;    
    table-layout: fixed;
}

section.products > article {
    display: table-cell;
    width: 33%;
}

---

这无法正确设置宽度（每个项目的宽度都会自动设置为使所有项目元素都适合一行）。但是当我设置

时，如果您有如下所示的三个子元素，那么表布局就会起作用

如果您只有一个子元素，它将展开以填充整个可用宽度，即使您为宽度应用了内联样式，请参见示例2和3

但是，如果将
display:block
设置为单个子
项目
，则宽度将为33%，但这是因为中的元素不再像表格单元格那样工作


section.products{
显示：表格；
宽度：100%；
表布局：固定；
边框：1px点灰色；
}
第1节产品>文章{
显示：表格单元格；
宽度：33%；
边框：1px点灰色；
}
section.products>article.blocky{
显示：块；
}

第一条不可分割，不可分割，不可分割，不可分割，不可分割。非乌尔纳eleifend mattis腔隙的Nunc分子。无主同侧前方，无主同侧前方，无主同侧前方前方，无主同侧前方。
第二条不可分割的区域，不可分割的区域，不可分割的区域，不可分割的区域。非乌尔纳eleifend mattis腔隙的Nunc分子。无主同侧前方，无主同侧前方，无主同侧前方前方，无主同侧前方。
第三条不可转让、不可转让、不可转让、不可转让、不可转让。非乌尔纳eleifend mattis腔隙的Nunc分子。无主同侧前方，无主同侧前方，无主同侧前方前方，无主同侧前方。
例2
第一条不可分割，不可分割，不可分割，不可分割，不可分割。非乌尔纳eleifend mattis腔隙的Nunc分子。无主同侧前方，无主同侧前方，无主同侧前方前方，无主同侧前方。
例3
第一条不可分割，不可分割，不可分割，不可分割，不可分割。非乌尔纳eleifend mattis腔隙的Nunc分子。无主同侧前方，无主同侧前方，无主同侧前方前方，无主同侧前方。
例4
第一条不可分割，不可分割，不可分割，不可分割，不可分割。非乌尔纳eleifend mattis腔隙的Nunc分子。无主同侧前方，无主同侧前方，无主同侧前方前方，无主同侧前方。
当您在应用于每个
元素的样式表中设置
文章{width:33%；}
时。但是，如果使用仅适用于该元素的内联样式

在您的演示中，总共有4个表格单元格，您将每个单元格设置为33%，这将无法正常工作，因为总宽度超过100%。
如果我没有弄错的话，演示就在这里，您希望每个
文章
都是父块宽度的33%，并且希望每行有3个
文章
块。第四个将从第二行开始。如果是这种情况，您最好使用浮点数而不是表格单元格。那么我必须为一行中的三个单元格做些什么？@kmaci它将很好地处理您当前的css。