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，因此适用于所有<article>标记，其中class="section"属性如下所示

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

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

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

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

使用CSS格式化表格？

3 个答案: