如何使用<span>Jekyll 和 Github 页面？</span>

Question

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

在一页上，他有这三列，我想在 Markdown 中重新创建。 我正在尝试重新创建的页面

我看到了这个 stackoverflow 答案，它说如果我使用 <span> 和display:block; 风格。

我试过这个设置：

<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

我明白了。 格式化根本不起作用。 最奇怪的是你可以看到结束的 </span> 而不是开始的 <span>

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>

因此，对于您的 markdown，您可以使用 go ：

<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 ，这将帮助您为正确的工作选择正确的元素：

   块级元素

   块级元素总是从新行开始并占据可用的全部宽度（尽可能向左和向右伸展）。

   块级元素的示例：

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

   ---

   内联元素

   内联元素不会从新行开始，只占用必要的宽度。 内联元素示例：

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

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

2. 了解浮动，因为浮动是相对于父容器而言的，而您似乎错过了这个重要的事实：

   float属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本。

   float属性可以具有以下值之一：

   • left - 元素浮动到其容器的左侧
   • right - 元素浮动到其容器的右侧
   • none - 元素不浮动（将仅显示在文本中出现的位置）。 这是默认的
   • inherit - 元素继承其父元素的浮点值

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