align-items, работающий по-разному для разных gird предметов. небольшая проблема - PullRequest
Новая
       7

align-items, работающий по-разному для разных gird предметов. небольшая проблема

0 голосов
/ 22 марта 2020

у одного из моих элементов сетки есть изображение и текст, в то время как у других есть только текст. это заставляет их работать по-другому, когда я использую выравнивание. Как мне это исправить.

HTML код. Игнорировать навигационную панель.

CSS файл. Снова игнорируйте навигационную панель. Нав бар это тот, с классами. У меня проблема в том, где я использую идентификаторы.

вот ссылка на кодовый блок https://codepen.io/aronnora/pen/qBdMReM

HTML

    <div id="container">
      <div id="grid">
        <div id="firbo">
          <div id="image1"></div>
          <div id="text1">
          <h1>のイプサム</h1>
          <p>情試をー今17須ナヱホ引数73挑だこ待視んばろ愛告げ掲謝クエ群読建ヱ弥設もゃ真安仮稼こゃむぎ。復ものま堀福ユメ職質キ除負すかへ者屋神ユヤネ際舵雇ぽ局面スヲサ緑評だでひ巨1名し帯始レ引会ずゅリ図伝いけょ。事タ職動チヌルミ活75道ドむ発一意コヒヨ系経れわずル様上ケヲ是誠ぴ株95複ミサカ掲数図軽ル方近ゅ必来げ前更ろドっだ質写スもレみ席記ハモヨネ戦径リぼ</p>
          </div>
        </div>
        <div id="secbo">
          <h1>のイプサム</h1>
          <p>情試をー今17須ナヱホ引数73挑だこ待視んばろ愛告げ掲謝クエ群読建ヱ弥設もゃ真安仮稼こゃむぎ。復ものま堀福ユメ職質キ除負すかへ者屋神ユヤネ際舵雇ぽ局面スヲサ緑評だでひ巨1名し帯始レ引会ずゅリ図伝いけょ。事タ職動チヌルミ活75道ドむ発一意コヒヨ系経れわずル様上ケヲ是誠ぴ株95複ミサカ掲数図軽ル方近ゅ必来げ前更ろドっだ質写スもレみ席記ハモヨネ戦径リぼ。</p>
        </div>
        <div id="thirbo">
          <h1>のイプサム</h1>
          <p>情試をー今17須ナヱホ引数73挑だこ待視んばろ愛告げ掲謝クエ群読建ヱ弥設もゃ真安仮稼こゃむぎ。復ものま堀福ユメ職質キ除負すかへ者屋神ユヤネ際舵雇ぽ局面スヲサ緑評だでひ巨1名し帯始レ引会ずゅリ図伝いけょ。事タ職動チヌルミ活75道ドむ発一意コヒヨ系経れわずル様上ケヲ是誠ぴ株95複ミサカ掲数図軽ル方近ゅ必来げ前更ろドっだ質写スもレみ席記ハモヨネ戦径リぼ。</p>
        </div>
        <div id="forbo">
          <h1>のイプサム</h1>
          <p>情試をー今17須ナヱホ引数73挑だこ待視んばろ愛告げ掲謝クエ群読建ヱ弥設もゃ真安仮稼こゃむぎ。復ものま堀福ユメ職質キ除負すかへ者屋神ユヤネ際舵雇ぽ局面スヲサ緑評だでひ巨1名し帯始レ引会ずゅリ図伝いけょ。事タ職動チヌルミ活75道ドむ発一意コヒヨ系経れわずル様上ケヲ是誠ぴ株95複ミサカ掲数図軽ル方近ゅ必来げ前更ろドっだ質写スもレみ席記ハモヨネ戦径リぼ。</p>
        </div>
      </div>
    </div>

CSS

#grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows:46.29rem;
  grid-template-areas: "firbo secbo thirbo forbo";
  grid-gap: 1rem;
  justify-items: space-between;
  align-items: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
}
#firbo{
  position: relative;
  padding-left: 1rem;
  grid-area: firbo;
}
#text1{
  position: absolute;
  z-index: 0;
}

#image1{
  position: absolute;
  z-index: 1;
  width:10rem;
  height: 10rem;
  background-image: url(tesla_logo_PNG16.png);
  background-size: 100%;
}
#secbo{
  grid-area: secbo;
}
#thirbo{
  grid-area: thirbo;
}
#forbo{
  padding-right: 1rem;
  grid-area: forbo;
}

1 Ответ

0 голосов
/ 22 марта 2020

Попробуйте удалить position: absolute; для #text1

#text1 {
    /* position: absolute; */
    z-index: 0;
}
...