将此表的内容与 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 块级标签周围的标签。
例如，将 HTML 表格添加到 Markdown 文章：

然后在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>

这是由谁制作的

但该数字不应位于“示例”下方，因为这些类非常独特。我正在编写自定义类并将它们包括在.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