Question

我正在尝试创建一个带有黑色背景的标题，左边是我的名字，下面是“记者”，右边是一些文字。但是我看不出有什么不对，因为当我尝试这个时，另一个文本出现在另外两个文本（名字和记者）的水平之下，而不是在同一高度。请帮帮忙？

对不起这种语言，我是巴西人，也是编码的先驱。

.fundo-header {
  background-color: #2D2C2F;
  background-position: center;
  height: 14%;
}

body {
  margin: 0px;
  padding: 0px;
}

.subtitulo {
  font-weight: lighter;
  font-style: italic;
}

<header class="fundo-header">
  <div>
    <h1>Pedro Henrique</h1>
    <h4 class="subtitulo">Jornalista</h4>
  </div>
  <h2 style="text-align:right">ramdom text</h2>
</header>

Answer 1

div是一个块级元素，这意味着它占据了它的父级的整个空间。您可以通过将h2设置为float来解决此问题：右;

<header class="fundo-header">
    <h2 style="float:right">ramdom text</h2>
    <div>
        <h1>Pedro Henrique</h1>
        <h4 class="subtitulo">Jornalista</h4>
    </div>
</header>

如果您不需要IE10支持，您也可以使用flexbox：

<header class="fundo-header" style="display: flex;">
    <div style="flex-grow: 1;">
        <h1>Pedro Henrique</h1>
        <h4 class="subtitulo">Jornalista</h4>
    </div>
    <h2>ramdom text</h2>
</header>

Answer 2

flexbox解决方案可能更好

<header class="fundo-header">
    <div>
        <h1>Pedro Henrique</h1>
        <h4 class="subtitulo">Jornalista</h4>
    </div>
    <h1>ramdom text</h1>
</header>

.fundo-header {
        background-color:#2D2C2F;
        background-position: center;
        height:14%;
        display:flex;
        justify-content:space-between;
}

    body{    
        margin: 0px;
        padding: 0px;
    }
    .subtitulo {
        font-weight: lighter;
        font-style: italic;
    }

Answer 3

h1，h2和h4是块元素，因此默认情况下使用其父元素的完整内容。这就是h2转到下一行的原因。

下面我使用了一个flexbox作为父元素，并通过CSS排列对齐。文档在代码中。希望这会有所帮助。

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}

h1,
h2,
h4 {
  margin: 0;
} /* Reset */

h1 {
  margin-bottom: 1rem;
}

.fundo-header {
  background-color: #2D2C2F;
  display: flex;
  justify-content: space-between; /* Horizontal alignment */
  align-items: flex-start; /* Vertical alignment */
  padding: 5%;
}

.subtitulo {
  font-weight: lighter;
  font-style: italic;
}

＆＃13;

<header class="fundo-header">
  <div>
    <h1>Pedro Henrique</h1>
    <h4 class="subtitulo">Jornalista</h4>
  </div>
  <h2>ramdom text</h2>
</header>

＆＃13;

如何在其他文本的同一高度写文本，但在另一边？

3 个答案: