高级CSS技巧：CSS3多列中的大写字母（大写字母）

大约一年以来，

multi-column

css3属性已经成熟，并得到了许多浏览器的支持。最终在您的网站上实现它的原因是为了更好的设计和可读性。我想让我们把信封推到多列中，采用古老但非常漂亮的落笔（=第一个大写字母）但是，某些屏幕宽度会破坏FireFox中的多列布局。我做错了什么

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

---

---

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

---

---

以上是Internet Explorer 11上大多数屏幕宽度的更多对齐问题。好奇的Safari和Chrome在所有浏览器屏幕宽度上都完美地显示了布局，没有任何破损

---

---

我不确定这个专栏的问题。你应该做一把小提琴，以便我们能更快地帮助你。至于第一个上限问题。这很棘手，你的限制是什么？你能把它硬编码成正确的样子吗？还是必须动态地编码

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

:before 

---

问题的原因是

多列p:first字母上的
浮动：left
，如果将其取出，您将看到它不再存在该问题；但是，第一个字母的格式不同。所以我创建了一个

#多列p{
浮动：左；
}

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

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

----更新-----

所以，在花了很长时间试图让它按预期运行之后，如果你现在看看更新的

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

这是我能想出的解决你问题的最简单的方法，希望对你有所帮助
 首先，我想说的是，仍然不推荐使用多列布局模块

主要是因为缺少对
前中断
，
后中断
，
内部中断
属性的支持，IE 10+和专有的
-webkit列中断*
属性除外（请参见：）。

（你也可以看看我对这个问题的回答：）

此外，您必须记住，有一个所谓的“”，它似乎被您的
：第一个字母
选择器搞糊涂了

您可以通过使用带有类属性的
span
元素来代替落差上限来避免此问题

但由于第一个字母的大小比正文的其余部分大，因此出现了另一个问题。

可能会出现这样的情况，即段落开头的一行（单个）文字加上落差可能适合上一列，而落差（约为正常文字的两倍）可能不适合

为了避免这种不必要的行为，您必须使用另一个
span
元素，该元素包含的文本至少比一行（文本）包含的文本多

给这些span元素一个
显示：inline块解决了这个问题

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

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

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

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

真的非常感谢您！必须是动态的，否则超级酷的数字呆板和动态又有什么意义呢！？：）@布里顿，你的“解决方案”中的“多列”在哪里！？我想你错过了主题…，对不起。谢谢@BoltClock对你的（布局）修改！的确，布局
非常重要！谢谢和+1@Amir5000，但是多列的整个想法当然是，它会自动填充并按比例均匀地流过所有三列。。。不过，感谢您为隔离问题所做的努力。。。这使我们离解决方案又近了一大步……是的，这会很好，但浮动仍然是它不能正确流动的原因。我仍然在寻找一个CSS唯一的解决方案，使其流动，所以我会让你知道。谢谢。我想感谢你的天才火花创意，既然你是新来的，我想让你获得100分的奖金。谢谢！迄今为止最好的解决方案。+1！回答得很好@Netsurfer。我对你的“slution”（布局方面）做了一些调整：@Sam谢谢，很高兴你喜欢这个提议的解决方案！当然，只要根据你的需要/具体情况“调整”就行了。我同意@Web Tiki的观点，并接受这个答案，认为这是迄今为止最好的解决方案。我们可能会在一年后回来，看看在多列支持的环境中发生了什么变化，显然，这仍然是儿童鞋。
p { float:left;}
#multicolumn { line-height: 20px; } /*need for IE browser*/