跨越几行

Question

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

<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：此值使元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框

来源（w3.org）：http://www.w3.org/TR/CSS21/visuren.html

Answer 2

只需将inline-block的显示属性值添加到.block-black，让它们并排排列，然后将block的显示属性值添加到内部跨度，让它们占用全部宽度为.block-black，彼此堆叠。

＆＃13;

＆＃13;

.block-black {
    display: block;
    width: auto;
    display: inline-block;
      border: solid 5px black;
    padding: 10px;

}

.block-black:last-of-type {

    margin-top: 15px;
}

.block-black span {
    width: 100%;
    display: inline-block;
    margin-bottom: 5px;
}

.block-black span:first-of-type {
border: solid 5px blue;
}
.block-black span:last-of-type {
border: solid 5px red;
}

＆＃13;

<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</span>
  <span class='line2 red'>text-text-texttt</span>   
</span>


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

＆＃13;

＆＃13;

＆＃13;

注意：调整CSS属性值以获得所需的结果。