高级CSS技巧：CSS3多列中的资本首字母（首字下沉）

Question

大约一年后，multicolumn css3属性成熟，得到了许多浏览器的支持。最终在您的网站上实现它的原因是为了更好的设计和可读性。我想，让我们推开信封，采用古老但又如此美丽的 Drop Caps （=第一个大的首字母）进入多列。 但是，某些屏幕宽度会破坏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;
}

Answer 1

问题的原因是float:left #multicolumn p:first-letter，如果你把它拿出来，你就会发现它不再存在这个问题;但是，您没有使用第一个字母所需的相同格式。所以我创建了一个JSFIDDLE，我添加了

#multicolumn p { float: left; }

并为#multicolumn容器添加了一个宽度，并将其置于中心位置。

希望能为您解决问题。

<强> -------更新---------

因此，经过多长时间试图让它按预期流动，我能够提出一个非常简单的解决办法，如果你现在看看更新的FIDDLE

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

这是解决问题的最简单方法，希望有所帮助！

Answer 2

首先，我想说仍然不推荐使用多列布局模块。

主要是因为缺少对break-before，break-after，break-inside属性的支持，IE 10+和专有-webkit-column-break-*属性除外（请参阅：{ {3}}）。
（你也可以看看我对这个问题的回答：CSS3 Multiple column layout）

此外，你必须记住，有一个所谓的“IE (11) improper handling of CSS multi-columns?”，它似乎被你的:first-letter选择器搞糊涂了。

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

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

要避免这种不必要的行为，您必须使用另一个span元素，其中至少包含的文本可能只包含一行（文本）！ 给这些span元素display: inline-block;解决了这个问题。

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

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

所以这是我提出的“解决方案”：multi-column pseudo-algorithm

Answer 3

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

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

:before 

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

Answer 4

我在css下面有Chenges

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

Demos