将此表的内容与CSS对齐的最佳做法？

Question

使用移动版博客，我正在尝试为此内容实现此布局。

我可以破解它，或者我可以使用桌子。但我想知道CSS中关于如何最好地实现这一目标的最佳实践。一些挑战出现了。我在Jekyll工作，所以这篇文章是用markdown写的。我按照daringfireball.net/projects/markdown/basics上的说明将其放在一起

* Example 1: A BruxZir bridge has 3 mm high x 3 mm wide connectors.

    3 mm2   x 3 mm = 3x3x3 = 27. This bridge will be able to carry a proportional load
    in the oral environment, according to the Rule of 27.

* Example 2: A BruxZir bridge has 4 mm high x 2 mm wide connectors.

    4 mm2 x 2 mm = 4x4x2 = 32. This is an even better outcome.

* Example 3: A BruxZir bridge has 2 mm high x 4 mm wide connectors.

    2 mm2 x 4 mm = 2x2x4=16. This outcome of only 16 is insufficient. 

哪个产生

因为这是一个如此独特的帖子，我考虑不将它包含在主css文件中。如果必须，甚至代码内联。我在Stack Overflow - For div to extend full height读了一个类似的问题。但代码似乎很冗长。

所以我采取了这个表格。纯粹的降价选项似乎不可行，Darling Fireball表示以下

  

对于Markdown语法未涵盖的任何标记，您只需使用HTML本身。没有必要为它添加前缀或分隔它以表明您正在从Markdown切换到HTML;你只需使用标签。

唯一的限制是块级HTML元素 - 例如<div>, <table>, <pre>, <p>等。 - 必须用空行与周围内容分开，并且不应使用制表符或空格缩进块的开始和结束标记。 Markdown非常聪明，不会在HTML块级标签周围添加额外的（不需要的）

标签。
例如，要在Markdown文章中添加HTML表格：

然后在html中完成了一个表。因此，通过该提示，我在html

中进行了以下操作

<table class="zirconiaExample">
  <tr>
    <th scope="row">Example 1:</th>
    <td>
      A BruxZir bridge has 3 mm high x 3 mm wide connectors.
  <br>
  3 mm2 x 3 mm = 3x3x3 = 27. This bridge will be able to carry a proportional load
      in the oral environment, according to the Rule of 27.
</td>
  </tr>

  <tr>
    <th scope="row">Example 2:</th>
<td>
      A BruxZir bridge has 4 mm high x 2 mm wide connectors.
      <br>
      4 mm2 x 2 mm = 4x4x2 = 32. This is an even better outcome.
    </td>
  </tr>

  <tr>
    <th scope="row">Example 3:</th>
    <td>
      A BruxZir bridge has 2 mm high x 4 mm wide connectors.
      <br>
      2 mm2 x 4 mm = 2x2x4=16. This outcome of only 16 is insufficient. 
    </td>
  </tr>
</table>

哪个产生了这个

但是这个数字不应该在＆＃34;示例＆＃34;之下。因为这些类是如此独特。我正在编写自定义类，并在.markdown文件

中包含它们

<style>
  table.zirconiaExample th { 
        display: table-cell;
        vertical-align: top; 
  }
</style>

我是否应该继续抨击这种可能无法重复使用的特定风格？还是有更好的做法？

Answer 1

您只需设置padding-left并使用text-indent拉出第一行即可为段落添加悬挂式缩进：

<强> HTML

<p class="hangingindent">
    <b>Example 1:</b> A BruxZir bridge has 3 mm high x 3 mm wide connectors. 3 mm2 x 3 mm = 3x3x3 = 27. This bridge will be able to carry a proportional load in the oral environment, according to the Rule of 27.
<p>

<强> CSS

.hangingindent {
    padding-left: 5em;
    text-indent: -5em;
}

<强> Demo fiddle