如何将 <span> 与 Jekyll 和 Github Pages 一起使用？

Question

我的朋友创建了一个包含 Google 个站点的网站，我向他展示了 Jekyll 和 Markdown，他认为他更喜欢这些，所以我将他的网站移植到 Github Pages 站点.

他在一页上有这三列，我想在 Markdown 中重新创建这些列。 Page I'm trying to recreate

我看到 说如果我使用 display:block; 样式的 ，我可以在 div 中获取 Markdown。

我试过这个设置：

<span style="display:block; float:left;">**Left Column Title

Thing 1

Thing 2

Thing 3

</span>

<span style="display:block; float:right;">**Right column title**

Thing 4

Thing 5

Thing 6

</span>

但不是预期的结果

Left Column Title     Right Column Title

Thing 1               Thing 4

Thing 2               Thing 5

Thing 3               Thing 6

我明白了 this. The formatting does not work at all. 最奇怪的是你可以看到结束 但看不到开始

Answer 1

这是一个可以工作的纯 HTML 片段：

<div style="witdh: 100%;">
  <div style="float:left; width: 50%;">
    <h2>Left column title</h2>
    <p>Thing 1</p>
    <p>Thing 2</p>
    <p>Thing 3</p>
  </div>
  <div style="float:left; width: 50%;">
    <h2>Right column title</h2>
    <p>Thing 4</p>
    <p>Thing 5</p>
    <p>Thing 6</p>
  </div>
<div>

所以对于降价，你可以选择：

<div style="witdh: 100%;">
  <div style="float:left; width: 50%;">
    **Left column title**
    
    Thing 1

    Thing 2

    Thing 3
  </div>
  <div style="float:left; width: 50%;">
    **Right column title**
    
    Thing 4

    Thing 5

    Thing 6
  </div>
<div>

一组一般性建议：

1. 了解一些不同的 HTML 元素及其默认值 display，这将帮助您为正确的工作选择正确的元素：

   Block-level Elements

   A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

   Examples of block-level elements:

   • <div>
   • <h1> - <h6>
   • <p>
   • <form>
   • <header>
   • <footer>
   • <section>

   ---

   Inline Elements

   An inline element does not start on a new line and only takes up as much width as necessary. Examples of inline elements:

   • <span>
   • <a>
   • <img>

   ^{来源：https://www.w3schools.com/css/css_display_visibility.asp}

2. 学习浮动，因为浮动是相对于父容器而言的，你好像忽略了一个重要的事实：

   The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

   The float property can have one of the following values:

   • left - The element floats to the left of its container
   • right - The element floats to the right of its container
   • none - The element does not float (will be displayed just where it occurs in the text). This is default
   • inherit - The element inherits the float value of its parent

   ^{来源：https://www.w3schools.com/css/css_float.asp}