如何分隔堆疊在一起的div-有解無憂

所以，這是我的代碼：

.headline {
  font-size: 61px;
  font-family: 'Gotham Pro Medium', sans-serif;
  /* font-weight: 700; */
  color: rgb(81, 83, 74);
  text-transform: uppercase;
  line-height: .9;
  -moz-transform: matrix( 0.99960015993603, 0, 0, 1.00025484199796, 0, 0);
  -webkit-transform: matrix( 0.99960015993603, 0, 0, 1.00025484199796, 0, 0);
  -ms-transform: matrix( 0.99960015993603, 0, 0, 1.00025484199796, 0, 0);
  /* position: absolute; */
  margin: auto;
  left: 61.909px;
  top: 230px;
  width: 490px;
  height: 55px;
  z-index: 11;
}

<div class="headline">WE BELIEVE</div>
<div class="headline">GREAT PEOPLE</div>
<div class="headline">DESERVE TOP</div>
<div class="headline">REWARDS.</div>
<div class="subhead">Make your mark at RapidScale.</div>

在 JSfiddle 中，它看起來比在我的瀏覽器中呈現的效果要好得多：

我不確定為什么這些會產生不同的結果，但基本上我只是希望這些線條彼此堆疊而不是串聯。你能幫我么？

uj5u.com熱心網友回復：

洗掉任何absolute定位。這不是必需的。將代碼嵌套在 a 中wrapper并使用flex. 指定flex-direction: column;然后你可以指定一個gap你希望它們間隔多少。

.headline {
  font-size: 61px;
  font-family: 'Gotham Pro Medium', sans-serif;
  color: rgb(81, 83, 74);
  text-transform: uppercase;
  line-height: .9;
  margin: auto;
  width: 490px;
  height: 55px;
  z-index: 11;
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

<div class="wrapper">
  <div class="headline">WE BELIEVE</div>
  <div class="headline">GREAT PEOPLE</div>
  <div class="headline">DESERVE TOP</div>
  <div class="headline">REWARDS.</div>
  <div class="subhead">Make your mark at RapidScale.</div>
</div>

uj5u.com熱心網友回復：

發行者是由您position : absolute同時設定banner * {}和引起的.headline {}。任何一個的存在都會導致頭條新聞崩潰到同一個位置。

在這個 JSFiddle中，我能夠通過添加position : absolute到div {}.

position : absolute用position : relativefor替換.headline {}應該可以解決此問題，如此 JSFiddle中所示。

uj5u.com熱心網友回復：

您只需要使用我給定的 css 更新您的 .wrapper 和 .headline ，它就會完美運行。

.headline {
    position: relative;
    font-size: 61px;
    font-family: 'Gotham Pro Medium', sans-serif;
    color: rgb(81, 83, 74);
    text-transform: uppercase;
    line-height: .9;
    -moz-transform: matrix( 0.99960015993603,0,0,1.00025484199796,0,0);
    -webkit-transform: matrix( 0.99960015993603,0,0,1.00025484199796,0,0);
    -ms-transform: matrix( 0.99960015993603,0,0,1.00025484199796,0,0);
    left: 61.909px;
    top: 230px;
    width: 490px;
    height: 55px;
    z-index: 11;
}

.wrapper {
    position: relative;
    width: 1200px;
    height: 628px;
    overflow: hidden;
    border: solid 1px red;
    display: flex;
    flex-direction: column;
}

<div class="wrapper">
  <div class="headline">WE BELIEVE</div>
  <div class="headline">GREAT PEOPLE</div>
  <div class="headline">DESERVE TOP</div>
  <div class="headline">REWARDS.</div>
</div>

您可以在此處查看我對您的代碼的編輯。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/454005.html

標籤：html css CSS位置

上一篇：哪個給定選項是/等價于以下規則？

下一篇：我的CSS中的什么導致我的標題/導航欄顯示不正確？