Question

我有一个50vw宽的div，包含一些文本，下面还有一些我希望与右边对齐的文本，如下所示：

这是当前的CSS：

div {
  width:50vw;
  margin-left:7.4vw;
  } 

 h3{
   text-align:right;
 }

我想知道是否可以对齐h3文本，以便结束字符始终与h2文本的结尾字符对齐。此外，如果要扩展h2文本以使其跨越多行，是否可以将h3的结束字符与h2的最右侧字符对齐（文本是不合理的，所以根据字长不同，不同的线会有不同的长度。）

Answer 1

将display: inline-block;添加到div。

＆＃13;

div {
  margin-left: 7.4vw;
  display: inline-block;
}

h3 {
  text-align: right;
}

＆＃13;

<div>
  <h2>
    Some text here
  </h2>

  <h3>
    Other text here
  </h3>
</div>

＆＃13;

Answer 2

据我所知，您需要的是将text-align: right;添加到h2元素中，这将为您提供所需的结果。

Answer 3

如果外部div必须保持在50vw，解决方案是在div中添加一个新元素，您可以将标题对齐。

＆＃13;

div {
  width: 50vw;
  margin-left: 7.4vw;
}

hgroup {
  display: inline-block;
}

h3 {
  text-align: right;
}

＆＃13;

<div>
  <hgroup>
    <h2>
      Some text here.
    </h2>

    <h3>
      Other text here
    </h3>
  </hgroup>
</div>

＆＃13;

编辑：哦，我向@David Hedlund道歉，他已在评论中发布了一个演示版。在发布我的答案之前，我没有看到它。