顯示：箱（百分比）的表單元格的寬度

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％，所以無法正常工作。