html - 跨越多行

Question

我有几个 block ，每个 block 内有两个跨度

<span class='block black'>
  <span class='line1 blue'>Text</span>
  <span class='line2 red'>text-text-texttt</span>
</span>
....
<span class='block black'>
  <span class='line1 blue'>text-text-text-text-text</span>
  <span class='line2 red'>Texe</span>
</span>

我想按照以下方式使用 CSS 对它们进行格式化

Answer 1

你可以试试这个

span.block.black {
   display: inline-block;
}

span.block.blue, span.block.red {   
   display: block;
}

inline-block :该值导致元素生成内联级 block 容器。 inline-block 的内部被格式化为 block box，元素本身被格式化为 atomic inline-level box

来源(w3.org):http://www.w3.org/TR/CSS21/visuren.html