0

在博客的移动版本上工作，我正在尝试为此内容实现这种布局。

所需的布局

我可以破解它，或者我可以使用一张桌子。但我想知道 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上读到了一个类似的问题。但是代码似乎很冗长。

所以我把它做成了一张桌子。纯粹的降价选项似乎不可行，亲爱的火球说以下

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

我是否应该继续破解这种可能无法重复使用的特定样式？还是有更好的做法？

4

1 回答 1

3

您可以对仅设置 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;
}

演示小提琴

于 2013-08-16T23:16:57.137 回答