Question

我刚刚使用 display 和 white-space 属性发现了一个有趣的布局行为。

HTML

<div>
<span>Lorem
ipsum</span> <span style="display:inline-block;vertical-align:top">dolor
sit 
amet</span> <span style="display:inline-block;vertical-align:top">consectetur
adipisicing
elit</span>
</div>

CSS

* {
  white-space: pre;
}

你可以在这里查看。 https://jsfiddle.net/asdasd111/ct71n36w/2/

如您所见，它看起来像 dolor sit amet 之后的 Lorem ipsum 尾迹，对齐 Lorem ipsum 的最后一行的末尾。我试图让 consectetur adipisicing elit 也跟在 dolor sit amet 之后，如下所示。虽然 Lorem ipsum 被 dolor sit amet 尾随，但 dolor sit amet 是尾随但不是尾随。

Lorem
ipsum dolor
      sit 
      amet consectetur
           adipisicing
           elit

然而，我找不到路，我不确定是否有可能。

我可以只用 CSS 实现而不改变 HTML 结构吗？换句话说，我希望我有一个名为 trailing-and-trailed 的类，我需要做的只是将它应用于元素，而不管每个元素的宽度和高度

<div>
<span>Lorem
ipsum</span> <span style="display:inline-block;vertical-align:top">dolor
sit 
amet</span> <span style="display:inline-block;vertical-align:top">consectetur
adipisicing
elit</span> <span style="display:inline-block;vertical-align:top">sed
do
eiusmod
tempor
incididunt
</span> <span style="display:inline-block;vertical-align:top">ut
labore
et
dolore
manga
aliqua
</span>
<!-- so on -->
</div>

Lorem
ipsum dolor
      sit 
      amet consectetur
           adipisicing
           elit sed 
                do
                eiusmod
                tempor
                incididunt ut
                           labore
                           et
                           dolore
                           manga
                           aliqua

像这样。

多行内联元素后的多行内联块元素

0 个答案: