如何在右对齐标题的左侧对齐文本？

Question

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

在不使用文本块宽度的情况下，我很难找到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

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

Answer 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;
}

Answer 2

一种方法如下，下面的代码中有解释性注释：

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的开头始终与{{1}的开头对齐}，只需在<h1>元素上使用默认的text-align: left：

<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;
  /* 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;
}

参考文献：

• Fractional unit (fr)。
• grid-area。
• grid-template-areas。
• grid-template-columns。
• grid-template-rows。
• max-content。
• min-content。
• white-space。

Answer 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>

您可以在此处找到解决方案