显示：箱（百分比）的表单元格的宽度

Question

我有这样的CSS代码：

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

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

这并不正确设置宽度（每篇文章的宽度会自动设置为适合所有文章元素一个行）。但是，当我设置<article style="width: 33%;">（内联声明）时，宽度是正确的。哪里不对？感谢您的任何建议。

EDIT（DEMO）：https://jsfiddle.net/Lt822wkq/

Answer 1

，如果你有三个子元素，如下图所示的表格布局工作。

如果你只有一个子元素，这将扩大到填满整个可用宽度，即使你申请的内嵌样式的宽度，见例2和3

但是，如果你设置display: block到单个子女article，那么宽度将是33％，但这是因为元素不再像表格单元格那样工作。

section.products { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    border: 1px dotted gray; 
 
} 
 
section.products > article { 
 
    display: table-cell; 
 
    width: 33%; 
 
    border: 1px dotted gray; 
 
} 
 
section.products > article.blocky { 
 
    display: block; 
 
}

<section class="products"> 
 
    <article>Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> 
 
    <article>Article Two Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> 
 
    <article>Article Three Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> 
 
</section> 
 

 
<h2>Example 2</h2> 
 
<section class="products"> 
 
    <article>Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> 
 
</section> 
 

 
<h2>Example 3</h2> 
 
<section class="products"> 
 
    <article style="width: 33%;">Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> 
 
</section> 
 

 
<h2>Example 4</h2> 
 
<section class="products"> 
 
    <article class="blocky" style="width: 33%;">Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> 
 
</section>

Answer 2

当您在适用于每一个<article>元素的样式设置article {width: 33%;}。但是，如果您使用仅适用于该元素的内联样式<article style="width: 33%;">。

在您的演示中，总共有4个表格单元格，并且您将每个单元格设置为33％，因为总宽度超过100％，所以无法正常工作。