用 CSS 格式化表格？

Question

我想只使用 CSS（无标签）创建一个表格。我的目标是创建一个两行表，第一行有两个单元格，第二行有一个单元格。单元格内容垂直堆叠。谢谢你的帮助。

article {
  display: table;
  width: 440px;
  margin-left: 20px;
}

section {
  display: table-row;
}

article.section img {
  display: table-cell;
  width: 130px;	
}

article.section p {
  display: table-cell;
  width: 130px;
}

 <article>   <!-- table -->
   <section> <!-- table row 1 -->
	 <img src="images/People/napoleon.jpg" /> <!-- row 1, cell 1 -->
	 <img src="images/Symbols/fleurBlue.jpg" /> <!-- row 1, cell 2 -->		 
   </section>
   
   <section> <!-- row 2 -->
     <p> This is Napoleon Bonaparte as 
	   Emperor of France wearing his military 
		uniform. 
	 </p> 
   </section>
</article>

Refer this jsfiddle

Answer 1

选择器不正确。

article.section img 和 article.section p 应该是 article section img 和 article section p。

Answer 2

响应您的 Jsfiddle，我已做出更改 on JsFiddle

您在选择器中添加了不必要的.。就是这样。

Answer 3

看看下面的css

article.section img {
  display: table-cell;
  width: 130px; 
}

article.section p {
  display: table-cell;
  width: 130px;
}

article.section 是一个Class selector，因此它适用于所有具有class="section" 属性的<article> 标签，如下所示

<article class="section">   <!-- table -->
   <section> <!-- table row 1 -->
     <img src="images/People/napoleon.jpg" /> <!-- row 1, cell 1 -->
     <img src="images/Symbols/fleurBlue.jpg" /> <!-- row 1, cell 2 -->       
   </section>

   <section> <!-- row 2 -->
     <p> This is Napoleon Bonaparte as 
       Emperor of France wearing his military 
        uniform. 
     </p> 
   </section>
</article>

但您实际上想要选择<article> 标签包含的所有<section> 标签，所以您需要的是Descendant selectors。将article.section 更改为article section（将点替换为空格）如下

article section img {
  display: table-cell;
  width: 130px; 
}

article section p {
  display: table-cell;
  width: 130px;
}