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

Question

基本上我想将两条线对齐以显示在同一行上，但我真的不知道如何正确执行此操作。任何帮助表示赞赏，在此先感谢。

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; 
} 

Answer 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; 
} 

Answer 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> 

当然，你需要根据你的关于柱间隙需要进行调整。等等。