Markdown 不喜欢 HTML/CSS 列？答案

【问题标题】：Markdown doesn't like HTML/CSS columns?Markdown 不喜欢 HTML/CSS 列？
【发布时间】：2017-09-10 04:14:22
【问题描述】：

由于没有办法在 Markdown 中使用列进行原生编写，我自然而然地转向了我正在开发的网站的 HTML/CSS。

在阅读this 问题后，我实现了我的专栏，并在其中添加了一些段落。但是，我注意到在本地重新生成我的网站时，这些段落已被分块成一个文本块（即包括换行符在内的所有格式都被删除了)。

此外，包含我的列的<div> 块几乎没有高度。 “段落”直接贯穿页脚。现在，这里有一些明显的技巧，比如内联 style="height: 600px;" 并在我想要换行符的地方添加文字 <br> 标签，但这违背了使用 Markdown 转换器的目的。

[comment]: <> (This is in a .md file.)
<div id="column1" style="float:left; margin:0; width:33%;">
    small left column in Markdown format
</div>

<div id="column2" style="float:left; margin:0; width:67%;">
    long right column in Markdown format that goes past footer...
</div>

有人可以帮我理解问题的根源吗？

【问题讨论】：

我假设即使您在标题和标签中有 CSS，您还没有定义样式表？查看您的降价示例以及您期望列内容如何表现的快速涂鸦会很有帮助。
@stealththeninja 添加了我所做的一个最小示例。我确实有一个样式表，但它还没有在列上定义任何东西。另请理解我是网络开发的新手。
float 是不可包含的，除非包装元素也是 float 或使用 overflow: hidden <div style="overflow:hidden"><div style="float:left"></div></div> 这将修复浮动 div 相对于兄弟元素的定位。否则，您需要在浮动元素之前和/或之后使用 clear:both 或 clear:left
@fyrye 确实可以解决高度溢出问题，但它仍然不喜欢我的 Markdown 内容。
我居然找到了我的答案here！我需要将属性markdown="1" 添加到我的列块中。感谢您帮助解决高度溢出问题！

标签： html css jekyll kramdown

【解决方案1】：

我的意见：

您将布局 (HTML) 放入内容（.md 文件）中。那不是很漂亮。 Markdown 文件最好只包含 markdown 和 yml。布局是 html 文件，最好只包含 html 和液体 (source)。因为你有一个小的左列和一个大的右列，所以我会选择为左列创建一个 yml 变量并将内容用于右列。
通过页脚的文本是常见的 CSS 问题。对此的修复称为clearfix。这与 Markdown（或 Markdown 类型）完全无关。
如果您想将 Markdown 换行符转换为换行符，您只需告诉 Liquid（在您的布局中）这样做 (manual)。

希望这能解决您的问题并帮助您了解 Jekyll 的（结构）。

【讨论】：

【解决方案2】：

综合起来，这就是我得出的解决方案。我没有意识到kramdown 在 HTML 块中拥有自己的处理 Markdown 的方式。

<div style="overflow: hidden">
    <div id="column1" style="float:left; margin:0; width:33%;" markdown="1">
    small left column in Markdown format
    </div>

    <div id="column2" style="float:left; margin:0; width:67%;" markdown="1">
    long right column in Markdown format happily complying
    </div>
</div>

我编辑了问题的标签以反映我正在使用的特定类型的 Markdown，因为这不是一个通用的解决方案。

【讨论】：