高级CSS技巧:如何使用多列布局将文本段落对齐到“基线网格”？

Question

多年来，我一直在努力解决这个问题，现在我将通过展示一个典型的css多色布局来说明我的意思，即文本垂直移动，而不是整齐地与水平基线网格对齐！

检查下面这两个代码片段，您会发现在<br>中断后，文本不再对齐到原来的“基线”网格，并且行变得不可读地错对。在第一个代码片段中，我尝试只指针一个<br>，并尝试将其设置为跳过两行。在第二次试用中，我删除了p br{}，只插入了两个<br><br>，这也会导致段落文本不对齐。如何使所有列中的所有文本对齐(仅通过CSS！)到相同的基线水平网格？现在我觉得这跟大写字母大写的大写字母大写的跌落有关，但我还没有找到如何/为什么让它看起来整整齐齐。

这个结果只需要在最新版本的主流浏览器FireFox、Chrome、InternetExplorer和Safari上运行。

p br{
    display: block;
    margin: 0 0 2em 0;
}

​

article {
  width: 1000px;
  height: 520px;
  background-color: #ECC;
  text-align: justify;
  word-spacing: -1pt;
  line-height: 30px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 12px;
  -moz-column-gap: 12px;
  column-gap: 12px;
}
p:first-of-type:first-letter {
  float: left;
  font-size: 60px;
  margin: 11px 7px -9px -4px;
  font-weight: normal;
  line-height: 60px;
}
p br {
  display: block;
  margin: 0 0 2em 0;
}

<article>
  <p>
Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.<br>
    Verwarmen en koelen kan ook op manieren dat het geen enkele energie meer nodig is. Een experiment in hoeverre dit mogelijk is vergt het uiterste van twee natuurlijke processen: isolatie en ventilatie. Op de meeste plaatsen in de wereld is de warmte van de zon en de inwendige warmteproductie (van elektrische apparaten) onvoldoende om het hele jaar door in de leefruimtes een aangename binnentemperatuur te bereiken: er is verwarming nodig. Indien de binnentemperatuur hoger is dan de buitentemperatuur ontstaat volgens de wetten van Fourier energietransport door de schil van een gebouw (muur, dak, vloer).<br>

Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.<br>

Ook condenseert waterdamp minder snel op een warm oppervlak. De vacht of het verenkleed van dieren dient hetzelfde doel. De waterdamp migreert dan door de wand en de isolatie, om daarin te condenseren. Om die condensatie te voorkomen wordt dampdichte folie aangebracht, die de migratie van verse lucht ook belemmert, waardoor warmteverliezende ventilatieroosters moeten worden toegepast.</p>
</article>

​

​

article {
  width: 1000px;
  height: 520px;
  background-color: #ECC;
  text-align: justify;
  word-spacing: -1pt;
  line-height: 30px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 12px;
  -moz-column-gap: 12px;
  column-gap: 12px;
}
p:first-of-type:first-letter {
  float: left;
  font-size: 60px;
  margin: 11px 7px -9px -4px;
  font-weight: normal;
  line-height: 60px;
}

   <article>
  <p>
Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.
    <br>Verwarmen en koelen kan ook op manieren dat het geen enkele energie meer nodig is. Een experiment in hoeverre dit mogelijk is vergt het uiterste van twee natuurlijke processen: isolatie en ventilatie. Op de meeste plaatsen in de wereld is de warmte van de zon en de inwendige warmteproductie (van elektrische apparaten) onvoldoende om het hele jaar door in de leefruimtes een aangename binnentemperatuur te bereiken: er is verwarming nodig. Indien de binnentemperatuur hoger is dan de buitentemperatuur ontstaat volgens de wetten van Fourier energietransport door de schil van een gebouw (muur, dak, vloer).<br>

Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.<br>

Ook condenseert waterdamp minder snel op een warm oppervlak. De vacht of het verenkleed van dieren dient hetzelfde doel. De waterdamp migreert dan door de wand en de isolatie, om daarin te condenseren. Om die condensatie te voorkomen wordt dampdichte folie aangebracht, die de migratie van verse lucht ook belemmert, waardoor warmteverliezende ventilatieroosters moeten worden toegepast.</p>
</article>

​

Answer 1

回答可能会有点晚，但无论如何。通过删除默认的边距，行对齐的行为与您想要的一样：

p {
  margin:0;
}

请参阅：https://jsfiddle.net/w5vs4j59/