Question

编辑：我澄清了为什么我不想要桌子。

我有以下html：

<div id="heading">
   <span class="name">name</span> 
   <span class="age">age</span> 
</div> 
<div class="person">
   <span class="name">Sam</span> 
   <span class="age">1</span>
   <span class="description">This is a person description</span> 
</div> 
<div class="person">
   <span class="name">Bob bob</span> 
   <span class="age">2</span> 
   <span class="description">This is another person description</span>
</div>

我想渲染像结构一样的像素完美表：

       name         age
       ---------------------------------------------

       Sam          1

       This is a person description  

       ---------------------------------------------

       Bob bob      2

       This is another person description

       ---------------------------------------------

我可以使用什么css？

对我而言，这似乎在div中比在表中更好一点，但是如果相同的标记可以改为表，而不引入非语义行，我会很乐意使用表。

Answer 1

*.name { float:left; clear:left; width:200px; }
*.age { float:left; width:200px; }

div.heading, div.person { clear:both; overflow:hidden; zoom:1; }

^假设这就是它，但在语义上你的标记应该保持为一个表，并将其标记为：

 <table summary="Your Summary">
    <thead>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Sam</td>
        <td>1</td>
    </tr>

    <tr>
        <td>Bob bob</td>
        <td>2</td>
    </tr>
    </tbody>
</table>

Answer 2

让我们假设考虑到这是表格数据，使用<div>标签并不是非常语义...语义HTML就是使用正确的标签来表示输出的数据，而不管显示器如何。继续前进。

您可以使用以下CSS以表格方式显示它：

.heading, .person {
    clear: both;
}
.heading {
    font-weight: bold;
}
.heading .name,
.person  .name {
    display: block;
    width: 40em; /* for a table of 50em */
    float: left;
    clear: left;
}

.heading .age,
.person  .age {
    width: 10em; /* for a table of 50em */
    display: block;
    float: left;
}

.heading .description,
.person  .description {
    width: 50em; /* for a table of 50em */
    display: block;
    clear: left;
}

现在，由于您修改了原始问题以允许使用表格：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sam</td>
      <td>1</td>
    </tr>
    <tr>
      <td colspan="2">This is a person description</td>
    </tr>
    <tr>
      <td>Bob bob</td>
      <td>2</td>
    </tr>
    <tr>
      <td colspan="2">This is another person description</td>
    </tr>
  </tbody>
</table>

不需要CSS！

Answer 3

这应该有效：

.name, .age {
    display: block;
    float: left;
}

.name {
    width: 15em; /* change to fit needs */
}

/* consider adding the following */
.age {
    margin-left: 15em /* same as or greater than above width */
}

.person {
    clear: left;
}

#heading div {
    font-weight: bold;
    /* other fancy markup for heading style */
}

使用css表格显示div

3 个答案: