Question

我绊倒了一些非常愚蠢的东西，但我想要一个图像和一个div在一个960px的容器上伸展（在flex中对齐内容：space-between），但是h2占据了所有的空间。剩余的宽度，我不知道为什么，似乎可以找到一种方法来解决它。

＆＃13;

def auth_header
  # The authentication key must must use the ES256 algorithm and be in the Base 64 URL–encoded JSON web token format.
  # If your token doesn't use this format, you receive a BAD_AUTHENTICATION_TOKEN HTTP error.
  "Bearer #{auth_token}"
end

def auth_token
  @auth_token ||= fetch_auth_token
end

def fetch_auth_token
  header = {
      typ: "JWT", # Must be specified; not in documentation
      alg: "ES256",
      kid: key_id
  }

  body = {
      iss: team_id,
      iat: DateTime.now().to_time.to_i ,
      exp: DateTime.now().to_time.to_i + 43_200 # 12hrs     #    Time.now.to_i
  }

  authentication_token = JWT.encode(body, auth_key, 'ES256', header_files = header)
  authentication_token
end

def auth_key
  file = File.read(developer_token_file)
  key = OpenSSL::PKey::EC.new(file)
  key.check_key
  key
end

＆＃13;

.container-main{
  width: 96rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.activiteit{
  display: flex;
  justify-content: space-between;
}

.activiteit-title{
  font-family: "Fira Sans Heavy";
  font-size: 5rem;
}



.bg-activity{
  /* background-image: url(../assets/img/white-bg-small-lang-01.svg); */
  /* background-repeat: no-repeat;
  height: 40rem;
  width: 110rem; */
  background-position: center right;
  display: flex;
  flex-direction: column;

}

.activiteit-text{
  font-family: "Fira Sans Light";
  font-size: 2rem;
  letter-spacing: .1rem;
  line-height: 3.2rem;
}

＆＃13;

Answer 1

问题是你有宽度宽度：96rem和h2取得它所能拥有的一切。你有把它改成960px。

Answer 2

justify-content: space-between;对activiteit没有影响的原因是因为article-text比剩余的可用空间宽，因此迫使bg-activity填充剩余空间。< / p>

由于bg-activity是一个弹性列容器，并且align-items默认为stretch，activiteit也将填充其父级宽度。

如果限制.bg-activity的宽度，您将看到正在发生的事情。

请注意，我更改了一些值/尺寸，以便更好地在较小的容器中显示。

Stack snippet

.container-main{
  width: 800px; /*96rem;*/
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.activiteit{
  display: flex;
  justify-content: space-between;
}

.activiteit-title{
  font-family: "Fira Sans Heavy";
  font-size: 4rem;
}

.bg-activity{
  background-position: center right;
  display: flex;
  flex-direction: column;
}

.activiteit-text{
  font-family: "Fira Sans Light";
  font-size: 2rem;
  letter-spacing: .1rem;
  line-height: 3.2rem;
}

/*  added for demo purpose  */
.bg-activity{
  max-width: 500px;
}
.activiteit{
  background: #ddd;
}
.activiteit-title{
  border: 1px solid blue;
}
.bg-activity{
  border: 1px solid red;
}

<main>

    <div class="container-main">
      <article class="activiteit" id="activiteit1">
        <img src="http://placehold.it/200/f00" alt="C" width="200" height="200">
        <div class="bg-activity">

          <h2 class="activiteit-title">Blue Moonday.</h2>
          <p class="article-text">
            Als je er echt geen zin in hebt. Kruip dan terug in je bed. Neem je favoriete serie en snack en doe gewoon eens niets. Vergeet niet dat het tenslotte maar één maal blue monday per jaar is. Bekijk het positief er zijn zoveel meer mooie dagen. Check it
            out.
          </p>

        </div>
      </article>
    </div>
  </main>

所以，如果你是希望activiteit-title中的文字显示为右对齐，如果不是article-text，则可以更改align-items bg-activity } flex-end。

.container-main{
  width: 800px; /*96rem;*/
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.activiteit{
  display: flex;
  justify-content: space-between;
}

.activiteit-title{
  font-family: "Fira Sans Heavy";
  font-size: 4rem;
}

.bg-activity{
  background-position: center right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.activiteit-text{
  font-family: "Fira Sans Light";
  font-size: 2rem;
  letter-spacing: .1rem;
  line-height: 3.2rem;
}

<main>

    <div class="container-main">
      <article class="activiteit" id="activiteit1">
        <img src="http://placehold.it/200/f00" alt="C" width="200" height="200">
        <div class="bg-activity">

          <h2 class="activiteit-title">Blue Moonday.</h2>
          <p class="article-text">
            Als je er echt geen zin in hebt. Kruip dan terug in je bed. Neem je favoriete serie en snack en doe gewoon eens niets. Vergeet niet dat het tenslotte maar één maal blue monday per jaar is. Bekijk het positief er zijn zoveel meer mooie dagen. Check it
            out.
          </p>

        </div>
      </article>
    </div>
  </main>

或者在text-align: right上设置activiteit-title。

.container-main{
  width: 800px; /*96rem;*/
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.activiteit{
  display: flex;
  justify-content: space-between;
}

.activiteit-title{
  font-family: "Fira Sans Heavy";
  font-size: 4rem;
  text-align: right;
}

.bg-activity{
  background-position: center right;
  display: flex;
  flex-direction: column;
}

.activiteit-text{
  font-family: "Fira Sans Light";
  font-size: 2rem;
  letter-spacing: .1rem;
  line-height: 3.2rem;
}

<main>

    <div class="container-main">
      <article class="activiteit" id="activiteit1">
        <img src="http://placehold.it/200/f00" alt="C" width="200" height="200">
        <div class="bg-activity">

          <h2 class="activiteit-title">Blue Moonday.</h2>
          <p class="article-text">
            Als je er echt geen zin in hebt. Kruip dan terug in je bed. Neem je favoriete serie en snack en doe gewoon eens niets. Vergeet niet dat het tenslotte maar één maal blue monday per jaar is. Bekijk het positief er zijn zoveel meer mooie dagen. Check it
            out.
          </p>

        </div>
      </article>
    </div>
  </main>

H2有一个拉伸的宽度，我不明白为什么

2 个答案: