高级CSS技巧: CSS3中的大写首字母(下拉首字母)

Question

大约一年后，multicolumn css3属性成熟了，并得到了许多浏览器的支持。为了更好的设计和可读性，最终在你的网站上实现它的理由。我想，让我们推开信封，把古老而又美丽的首字母(=第一个大写字母)用在多字母中。然而， 某些屏幕宽度破坏了FireFox中的多色布局。我做错了什么？

见jsfiddle演示

调整窗口宽度时，可以在IE和Firefox中看到布局的跳转/中断。下面是一个例子。卡住了是什么导致了多色错位的缺陷！？

​

​

对不起，我的胡子改变了自我的自画像:我忘了刮胡子，整天盯着这个问题，没有时间整理。我向你保证，但是一旦这个问题解决了，这里就有一张干净整洁的肖像画了！

​

​

以上是Internet 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

首先，我想说的是，使用多列布局模块仍然是不可取的。

主要是因为缺少对break-before、break-after、break-inside属性的支持，除了IE 10+和专有-webkit-column-break-*属性(请参阅：CSS3多列布局)。

(你可能还想看看我对这个问题的答案：(11)不正确地处理CSS多列？)

另外，您必须记住，有一个所谓的"多列伪算法"，它似乎被您的:first-letter选择器搞糊涂了。

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

但是，由于前几个字母的大小比文本的其余部分要大，因此出现了另一个问题。

可能发生的情况是，一段开头的(单行)文本中带有下拉帽的行可能与前一列相匹配，而下拉帽(约为普通文本的两倍)可能不适合。

为了避免这种不必要的行为，您必须使用另一个span元素，它至少包含比单行(文本)更多的文本！

并且给这些span元素一个display: inline-block;来解决这个问题。

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

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

下面是我提出的“解决方案”：演示

Answer 2

问题的原因是float:lefton The #multicolumn p:first-letter，如果去掉它，您将看到它不再存在这个问题；但是，您的第一个字母的格式与您想要的不一样。所以我创建了一个JSFIDDLE

#multicolumn p { float: left; }

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

希望能为你解决这个问题。

-------Update---------

因此，经过了很多时间的努力，使它按预期的方向流动，我能够提出一个非常简单的工作，如果你现在看看更新的小提琴。

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

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

Answer 3

我对专栏的问题不太确定。你应该为它做一把小提琴，这样我们才能更快地帮助你。就第一次发行上限而言。这是相当棘手的，你的限制是什么？你能对它进行硬编码吗?还是你必须动态地去做呢？

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

:before 

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