如何将文本对齐到右对齐标题的左侧？答案

【问题标题】：How to align text to the left of a right-aligned headline?如何将文本对齐到右对齐标题的左侧？
【发布时间】：2019-08-07 10:10:02
【问题描述】：

我有一个与网站右侧对齐的标题和一个左对齐的文本块，它应该与标题的开头对齐。

我很难找到不使用文本块宽度的 CSS 解决方案，因为它不适用于不同的标题宽度。

div {
  float: right;
}

h1 {
  font-size: 120px;
  margin: 0;
  letter-spacing: 4px;
}

.textblock {
  font-size: 16px;
  text-align: left;
  width: 500px;
}

<div>
  <h1>headlinelong</h1>
  <div class="textblock">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

https://codepen.io/hpmacher/pen/bXLmGL

我希望文本块始终与标题具有相同的宽度，无论标题有多长。但是现在它是由宽度控制的，因此不会改变。

【问题讨论】：

感谢您对 HTML 的兴趣，但也请了解 HTML 标准在何处以及如何在应用程序中使用适当的 HTML 元素。当您尝试显示段落文本时，请始终使用
标签而不是 Div。

在模板中具有特定用途。
CSS 位置是实现这一要求的最佳方法。将标题和文本都包裹起来，并使用 CSS 位置。

标签： css text-align

【解决方案1】：

试试这个：

.textblock {
    font-size: 16px;
    width: 500px;
    float: left;
    text-align: left;
}

编辑：

如果你对使用 JS 没问题，你可以在 </body> 标签之后应用这个简单的脚本

<script type="text/javascript">
    var headline = document.getElementsByTagName('h1')[0];
    var textblock = document.getElementsByClassName('textblock')[0];

    textblock.style.width = headline.clientWidth + 'px';
    textblock.style.textAlign = 'left';
</script>

我建议修改css

div {
    float: right;
}
h1 {
    font-size: 60px;
    margin: 0;
    letter-spacing: 4px;
    float:right;
}
.textblock {
    font-size: 16px;
    clear: both;
}

【讨论】：

谢谢。它确实将文本块设置在左侧并将其与标题对齐，但它仍然具有特定的宽度。文本块应与标题一样宽。
您可以查看这支笔：codepen.io/edekk/pen/rXJQmj 我添加了一个观察者来跟踪 h1 元素样式的变化。您可以更改该元素的 font-size 属性，它将调用负责将宽度设置为 .textblock div 的函数

【解决方案2】：

一种做法如下，在下面的代码中解释cmets：

body>div {
  /* Using grid layout: */
  display: grid;
  /* defining named grid areas; because you were
     originally floating right, I assume you want
     space to the left, hence the empty areas
     (marked with a period ('.'): */
  grid-template-areas: ". header" ". content";
  /* defining the column widths; here the first column is measured
     as one fractional unit (1fr) of the available space remaining
     after the second column has been assigned the minimum width
     (min-content) required to contain the content: */
  grid-template-columns: 1fr min-content;
}

h1 {
  font-size: 120px;
  margin: 0;
  letter-spacing: 4px;
  /* aligning text to the right: */
  text-align: right;
  /* placing the <h1> in the named 'header' area: */
  grid-area: header;
}

.textblock {
  font-size: 16px;
  text-align: left;
  width: 500px;
  /* placing the content in the named 'content'
     area: */
  grid-area: content;
}

<div>
  <h1>headlinelong</h1>
  <div class="textblock">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata</p>
    <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>

如果<h1> 元素中出现空白，上述内容确实会遇到问题；解决该问题的一种方法是使用max-content 代替min-content，给出：

  grid-template-columns: 1fr max-content;

body > div {
  /* Using grid layout: */
  display: grid;
  /* defining named grid areas; because you were
     originally floating right, I assume you want
     space to the left, hence the empty areas
     (marked with a period ('.'): */
  grid-template-areas:
    ". header"
    ". content";
  /* defining the column widths; here the first column is measured
     as one fractional unit (1fr) of the available space remaining
     after the second column has been assigned the maximum width
     (max-content) required to contain the content: */
  grid-template-columns: 1fr max-content;
}

h1 {
  font-size: 120px;
  margin: 0;
  letter-spacing: 4px;
  /* aligning text to the right: */
  text-align: right;
  /* placing the <h1> in the named 'header' area: */
  grid-area: header;
}

.textblock {
  font-size: 16px;
  text-align: left;
  width: 500px;
  /* placing the content in the named 'content'
     area: */
  grid-area: content;
}

<div>
  <h1>headline long</h1>
  <div class="textblock"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata</p>
    <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
</div>

或者，或者，指定：

white-space: nowrap;

在<h1> 元素的规则中：

body > div {
  /* Using grid layout: */
  display: grid;
  /* defining named grid areas; because you were
     originally floating right, I assume you want
     space to the left, hence the empty areas
     (marked with a period ('.'): */
  grid-template-areas:
    ". header"
    ". content";
  /* defining the column widths; here the first column is measured
     as one fractional unit (1fr) of the available space remaining
     after the second column has been assigned the minimum width
     (min-content) required to contain the content: */
  grid-template-columns: 1fr min-content;
}

h1 {
  font-size: 120px;
  margin: 0;
  letter-spacing: 4px;
  /* aligning text to the right: */
  text-align: right;
  /* placing the <h1> in the named 'header' area: */
  grid-area: header;
  /* preventing the content of the <h1> from wrapping to
     a new line (with long content this can itself cause
     more problems as content either overflows the screen
     requiring scrolling, or becomes inaccessible due to
     overflow handling: */
  white-space: nowrap;
}

.textblock {
  font-size: 16px;
  text-align: left;
  width: 500px;
  /* placing the content in the named 'content'
     area: */
  grid-area: content;
}

<div>
  <h1>headline long</h1>
  <div class="textblock"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata</p>
    <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
</div>

虽然是最简单的解决方案，但鉴于在大多数情况下<h1> 可能是最长的内容，并且div.textblock 的开头将始终与<h1> 的开头对齐，只需使用<h1> 元素上的默认 text-align: left：

body > div {
  /* Using grid layout: */
  display: grid;
  /* defining named grid areas; because you were
     originally floating right, I assume you want
     space to the left, hence the empty areas
     (marked with a period ('.'): */
  grid-template-areas:
    ". header"
    ". content";
  /* defining the column widths; here the first column is measured
     as one fractional unit (1fr) of the available space remaining
     after the second column has been assigned the minimum width
     (min-content) required to contain the content: */
  grid-template-columns: 1fr min-content;
}

h1 {
  font-size: 120px;
  margin: 0;
  letter-spacing: 4px;
  /* placing the <h1> in the named 'header' area: */
  grid-area: header;
}

.textblock {
  font-size: 16px;
  text-align: left;
  width: 500px;
  /* placing the content in the named 'content'
     area: */
  grid-area: content;
}

<div>
  <h1>headline long</h1>
  <div class="textblock"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata</p>
    <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
</div>

参考资料：

【讨论】：

【解决方案3】：

试试这个

使用 CSS 的简单而出色的解决方案

h1 {
    font-size: 120px;
  margin: 0;
}
.textblock {
    font-size: 16px;
    position:absolute;
  left: 0px;
  right: 0px;
  top: calc(100% + 15px);
}
.wrap{
  display: flex;
  justify-content: flex-end;
}
.article{
  position: relative; 
}

<div class="wrap">
  <div class="article">
    <h1>headlinelong 1</h1>
     <div class="textblock">
       This text block should be always as width as the headline. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

你可以在这里找到解决方案

【讨论】：