【问题标题】：Advanced CSS Tricks: Capital Initial Letters (Drop Caps) within a CSS3 Multicolumn高级 CSS 技巧：CSS3 多列中的大写首字母（首字母大写）
【发布时间】：2014-04-01 00:42:53
【问题描述】：

大约一年以来，multicolumn css3 属性逐渐成熟，得到了许多浏览器的支持。最终在您的网站上实施它以获得更好的设计和可读性的理由。我想让我们挑战极限，在多列中采用古老但永远如此美丽的大写字母（=第一个大首字母）。 但是，某些屏幕宽度会破坏 FireFox 中的多列布局。我做错了什么？

see jsfiddle DEMO

调整窗口宽度时，您可以在 IE 和 Firefox 中看到布局的跳跃/中断。下面举个例子。坚持到底是什么导致了多列未对齐的缺陷！？

对不起，我的大胡子自画像：我忘了刮胡子，整天盯着这个问题，没有时间整理。我向你保证，一旦这个问题得到解决，你会在这里得到一张干净整洁的剃光肖像！

在 Internet Explorer 11 上的大多数屏幕宽度中存在更多对齐问题。好奇的 Safari 和 Chrome 在所有浏览器屏幕宽度处完美显示布局，没有破损。

#multicolumn {
         column-count: 3;
    -moz-column-count: 3;
 -webkit-column-count: 3;
         column-gap: 53px;
    -moz-column-gap: 53px;
 -webkit-column-gap: 53px;
         column-rule-color: #EEE;
    -moz-column-rule-color: #EEE;
 -webkit-column-rule-color: #EEE;
         column-rule-style: solid;
    -moz-column-rule-style: solid;
 -webkit-column-rule-style: solid;
     column-rule-width: 1px;
    -moz-column-rule-width: 1px;
 -webkit-column-rule-width: 1px;
}

#multicolumn p:first-letter{
    float:left;
    font-weight:normal;
    font-size:44px;
    margin: 7px 1px 0px 0px;
    line-height:27px;
    background-color:#AEE;
}

【问题讨论】：

感谢@BoltClock 您的（布局）修订！确实布局IS很重要！

标签： css layout multiple-columns

【解决方案1】：

首先我想说，使用多列布局模块还是不推荐的。

主要是因为缺少对break-before、break-after、break-inside 属性的支持，IE 10+ 和专有的-webkit-column-break-* 属性除外（请参阅：CSS3 Multiple column layout）。
（您可能还想看看我对这个 SO 问题的回答：IE (11) improper handling of CSS multi-columns?）

另外你必须记住，有一个所谓的“multi-column pseudo-algorithm”，它似乎被你的:first-letter 选择器弄糊涂了。

您可以通过使用带有类属性的span 元素来避免这个问题。

但是由于第一个字母的大小比文本的其余部分大，因此出现了另一个问题。
具有首字下沉的段落开头的（单）行文本可能适合前一列，而首字下沉（大约是普通文本的两倍）可能不适合。

为避免这种不必要的行为，您必须使用另一个 span 元素，该元素至少包含比单行（文本）可能容纳的更多的文本！
并且给这些 span 元素一个display: inline-block; 可以解决这个问题。

关于 Amir5000 的回答：虽然我提出的解决方案还需要一些额外的跨度元素，但它不使用“纯粹的表示性标记”，这也可能会产生不需要的空行。

但正如开头所说，使用多列至少非常“棘手”，并且很难跨浏览器和/或不同视口宽度获得预测结果。

所以这是我提出的“解决方案”：DEMO

【讨论】：

迄今为止最好的解决方案。
+1！很好的答案@Netsurfer。我稍微调整了你的“解决方案”（布局）：jsfiddle.net/53ht8
@Sam 谢谢，很高兴您喜欢我们提出的解决方案！当然 - 只需根据您的需要/个别情况“调整”它。
我同意@Web-Tiki 并接受这个答案作为最好的解决方案。我们可能会在一年后回来，看看多列支持的格局发生了什么变化，显然，这仍然是童鞋。

【解决方案2】：

问题的原因是#multicolumn p:first-letter上的float:left如果你把它拿出来你会发现它不再有这个问题；但是，第一个字母的格式与您想要的格式不同。所以我创建了一个JSFIDDLE 我添加的地方

#multicolumn p { float: left; }

并为#multicolumn 容器添加了宽度并将其居中，如您所见。

希望能为您解决问题。

-------更新---------

所以经过很长时间试图让它按预期流动后，我能够想出一个非常简单的解决方法，如果你现在看看更新的FIDDLE

我在段落之间添加了一个空的span 以清除浮动，还添加了一个媒体查询，以便在较小的屏幕上看起来更好

这是我能想出的解决您问题的最简单方法，希望对您有所帮助！！

【讨论】：

谢谢和+1 @Amir5000，但多列的整个想法当然是它会自动按比例均匀地填充和流动通过所有三列......感谢您为隔离问题所做的努力...这使我们离解决方案又近了一大步...
是的，它会很好，但浮动仍然是它不再正确流动的原因。我仍然在寻找一个只有 CSS 的解决方案来让它流动，所以我会告诉你的。谢谢。
我想感谢你的天才闪耀想法，因为你是新来的，我希望你有 100 分的赏金谢谢！

【解决方案3】：

我不确定列问题。你应该为它做一个小提琴，以便我们可以更快地帮助你。至于第一个上限问题。这很棘手，你的限制是什么？你可以硬编码它看起来正确还是你必须动态地做它？

我在这里发布了一个硬编码的解决方案。它基本上只是使用

:before

http://jsfiddle.net/emersive/bdAWQ/1/

【讨论】：

感谢确实会为此提供帮助！必须是动态的，否则超酷的数字书呆子和动态有什么意义！？ :)
@Britton 你的“解决方案”中的“多列”在哪里！？恕我直言，您错过了主题...，对不起。

【解决方案4】：

我在css下面有Chenges

p { float:left;}
#multicolumn { line-height: 20px; } /*need for IE browser*/

Demos

【讨论】：