Question

页眉中的主要标题占据了所有垂直空间，并将h2从中心移到了应该位于其下方的右侧，并且由于位于同一容器中而没有连接。

这些是我尝试过的几件事，但是即使仅将标题放在<p>标签中也占用了所有垂直空间。

div class ="header-wrap">
    <header>
      <div class="span-wrap">
        <span id="my">My</span> 
        <span id="journey">Journey</span> 
        <span id="of">of </span>
        <span id="learning">Learning</span></div>
      <h2>Documenting the Learning Process in a Fun Interactive way! </h2>
    </header></div>

这是CSS

 header-wrap, header{

  display:flex;
  color:white;  
  background-color:red;
  height: 100vh;
  width:100vw;}

h2 {

  font-size:25px;
  letter-spacing:2px;
  font-family:'Raleway';
  align-self:flex-end;}

.span-wrap{

  display:flex;
  justify-content:center;}


#my{
  font-size:55px;
  position:relative;
  top:30px;
}
span{
  max-height: 65px;
  display:block;
}
#journey{
  top:80px;
  font-size:55px;
  position:relative;
}
#of{
   top:120px;
  font-size:45px;
  position:relative;
  margin: 0 35px;
  border: solid;
  padding: 1px 15px;
  max-height:60px;}
#learning {
   top:185px;
  font-size:55px;
  position:relative;  
}

我希望<h2>Documenting the Learning Process in a Fun Interactive way! </h2>位于div的底部，不受“学习之旅”部分的影响。

Answer 1

您必须在此处使用列flexbox ，方法是将flex-direction: column添加到header，然后：

将flex: 1添加到span-wrap（在放置h2并将其推到底部之后，占用{em> 的可用空间）
将align-self: center元素更改为h2

请参见下面的演示

html body {
  font-family: 'Raleway';
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
}

ul li {
  display: none;
}

header-wrap,
header {
  display: flex;
  color: white;
  background-color: red;
  height: 100vh;
  width: 100vw;
  flex-direction:column; /* added */
}

h2 {
  font-size: 25px;
  letter-spacing: 2px;
  font-family: 'Raleway';
  align-self: center; /* changed */
}

.span-wrap {
  display: flex;
  justify-content: center;
  flex: 1; /* added */
}

#my {
  font-size: 55px;
  position: relative;
  top: 30px;
}

span {
  max-height: 65px;
  display: block;
}

#journey {
  top: 80px;
  font-size: 55px;
  position: relative;
}

#of {
  top: 120px;
  font-size: 45px;
  position: relative;
  margin: 0 35px;
  border: solid;
  padding: 1px 15px;
  max-height: 60px;
}

#learning {
  top: 185px;
  font-size: 55px;
  position: relative;
}

<div class="header-wrap">
  <header>
    <div class="span-wrap">
      <span id="my">My</span> <span id="journey">Journey</span> <span id="of">of </span><span id="learning">Learning</span></div>
    <h2>Documenting the Learning Process in a Fun Interactive way! </h2>
  </header>
</div>
<nav>
  <ul>
    <li>Arrays</li>
    <li>Objects</li>
    <li>Apps</li>
    <li>Design</li>
  </ul>
</nav>
<section>
</section>

为什么title元素占据了容器中所有的顶点空间？

1 个答案: