Question

基本上我想将两条线对齐以显示在同一条线上，但我真的不知道如何正确地做到这一点。感谢任何帮助，提前谢谢。

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>

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

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

2 个答案: