具有不同字体大小的独立段落的相同基线答案

【问题标题】：Same baseline for independent paragraphs with different font-size具有不同字体大小的独立段落的相同基线
【发布时间】：2016-08-28 03:22:55
【问题描述】：

基本上我想将两条线对齐以出现在同一条线上，但我真的不知道如何正确地做到这一点。任何帮助表示赞赏，在此先感谢。

fiddle

HTML

<div class="first">
  <p>
    Lorem<br/>
    ipsum<br/>
    dolor<br/>
    sit<br/>
    amet
  </p>
</div>

<div class="second">
  <p>Align</p>
  <p>Multi</p>
  <p>
    Lines<br/>
    And<br/>
    Paragraph
  </p>
</div>

CSS

div {
  float: left;
}

p {
  margin: 0;
}

.first {
  font-size: 17px;

  //...
  width: 50px;
}

.second {
  font-size: 13px;
}

【问题讨论】：

标签： html css alignment typography

【解决方案1】：

您可以尝试使用display 属性将两个DIV 并排对齐，这是一个非常基本的示例。 margin-right: -4px 是为了修复某些浏览器中的渲染错误，在这种情况下，两个 50% 宽度的 DIV 不能正确对齐。

Fiddle

div {
  width: 50%;
  vertical-align: top;
  display: inline-block;
}
p {
  margin: 0;
  display: block;
}

.second {
  margin-right: -4px;
}

【讨论】：

不会改变任何东西。

【解决方案2】：

如果我理解正确，您需要两列。我的解决方案如下：

CSS：

.two-col {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
    -webkit-column-gap: 1.5rem;
       -moz-column-gap: 1.5rem;
            column-gap: 1.5rem
}

HTML：

<div class="two-col">
  <p>
    Lorem<br/>
    ipsum<br/>
    dolor<br/>
    sit<br/>
    amet
  </p>
  <p>Align</p>
  <p>Multi</p>
  <p>
    Lines<br/>
    And<br/>
    Paragraph
  </p>
</div>

当然，您需要根据您对柱间距的需要进行调整。等等

【讨论】：