Блог

Главная - Вопросы по программированию - столбцы не совпадают даже с одним и тем же содержимым

столбцы не совпадают даже с одним и тем же содержимым

#html #css

#HTML #css

Вопрос:

Я все еще новичок в использовании HTML и CSS. У меня есть 2 divs для создания столбцов. Я понятия не имею, почему они, похоже, не выравниваются? Другой столбец кажется длиннее другого, несмотря на одинаковое количество элементов. Имеет ли это какое-то отношение к flex?

Вот фрагмент. Это все еще очень грязно, когда отображается на маленьком экране, поэтому, пожалуйста, просмотрите его на всю страницу.

 body {
  background: black;
}

.other-tracks {
  display: flex;
  flex-direction: row;
}

.track-row {
  margin: 150px;
  height: 100%;
  width: 100%;
  text-align: center;
}

.small-gray {
  font-size: 14px;
  color: #999;
  font-weight: 300;
  text-transform: uppercase;
}

.album-title {
  color: white;
  font-size: 23px;
  text-transform: uppercase;
  margin-top: -25px;
  font-weight: 300;
}

.album-img {
  width: 200px;
  height: 200px;
  margin-top: -20px;
}

.a {
  list-style: none;
  padding: 0;
}

.list {
  text-align: center;
  border-top: solid 1px #999;
  list-style: none;
  padding: 0;
}

.item-gray {
  font-size: 14px;
  color: #999;
  font-weight: 300;
  text-transform: uppercase;
}

.track-title {
  color: #f0e567;
  font-size: 18px;
  font-weight: 500;
} 
 <!DOCTYPE html>
<html>
<body>
  <section class="other-tracks">
    <div class="track-row">
      <h6 class="small-gray">EP</h6>
      <h5 class="album-title">Fuyunohanashi</h5>
      <img src="https://i.imgur.com/JqFj5Jd.png" class="album-img" alt="Fuyunohanashi">
      <h6 class="small-gray">2019</h6>
      <ul class="a">
        <ul class="list">
          <li>
            <p class="track-title">まるつけ</p>
          </li>
          <li>
            <p class="item-gray">FUYUNOHANASHI</p>
          </li>
          <li>
            <p class="item-gray">3:52</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">冬のはなし</p>
          </li>
          <li>
            <p class="item-gray">FUYUNOHANASHI</p>
          </li>
          <li>
            <p class="item-gray">3:26</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">Marutsuke - Instrumental</p>
          </li>
          <li>
            <p class="item-gray">FUYUNOHANASHI</p>
          </li>
          <li>
            <p class="item-gray">3:50</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">Fuyunohanashi - Instrumental</p>
          </li>
          <li>
            <p class="item-gray">FUYUNOHANASHI</p>
          </li>
          <li>
            <p class="item-gray">3:26</p>
          </li>
        </ul>
      </ul>
    </div>
    <div class="track-row">
      <h6 class="small-gray">Singles</h6>
      <h5 class="album-title">夜が明ける</h5>
      <img src="https://i.imgur.com/jhyARrw.jpg" class="album-img" alt="Singles">
      <h6 class="small-gray">2020</h6>
      <ul class="a">
        <ul class="list">
          <li>
            <p class="track-title">夜が明ける</p>
          </li>
          <li>
            <p class="item-gray">夜が明ける</p>
          </li>
          <li>
            <p class="item-gray">4:41</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">へたくそ</p>
          </li>
          <li>
            <p class="item-gray">へたくそ</p>
          </li>
          <li>
            <p class="item-gray">3:06</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">ステージから君に捧ぐ</p>
          </li>
          <li>
            <p class="item-gray">ステージから君に捧ぐ</p>
          </li>
          <li>
            <p class="item-gray">4:18</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">まるつけ</p>
          </li>
          <li>
            <p class="item-gray">まるつけ</p>
          </li>
          <li>
            <p class="item-gray">3:52</p>
          </li>
        </ul>
      </ul>
    </div>
  </section>
</body>
</html>

Ответ №1:

Чтобы каждый раздел был сбалансированным, вы всегда можете установить min-height свойство для каждого из вашего .list класса, чтобы иметь равные высоты.

Вы можете сделать это в CSS, подобном этому, просто:

 .list { min-height:120px;} // set height whichever you want.

Ответ №2:

Проблема в том, что когда у вас есть два разных сценария в одной строке, хотя вы установили одинаковый размер шрифта для обоих, их высоты строк, похоже, не равны. Я думаю, это потому, что скрипты сильно отличаются с точки зрения «потомков» (насколько они ниже базовой линии), но это всего лишь предположение.

Поэтому явно устанавливайте высоту строки везде, где вы устанавливаете размер шрифта.

Я сделал это в этом фрагменте, но вам нужно будет посмотреть, считаете ли вы, что этого достаточно или слишком много в каждом конкретном случае.

 body {
  background: black;
}

.other-tracks {
  display: flex;
  flex-direction: row;
}

.track-row {
  margin: 150px;
  height: 100%;
  width: 100%;
  text-align: center;
}

.small-gray {
  font-size: 14px;
  line-height: 20px;
  color: #999;
  font-weight: 300;
  text-transform: uppercase;
}

.album-title {
  color: white;
  font-size: 23px;
  line-height: 30px;
  text-transform: uppercase;
  margin-top: -25px;
  font-weight: 300;
}

.album-img {
  width: 200px;
  height: 200px;
  margin-top: -20px;
}

.a {
  list-style: none;
  padding: 0;
}

.list {
  text-align: center;
  border-top: solid 1px #999;
  list-style: none;
  padding: 0;
}

.item-gray {
  font-size: 14px;
  line-height: 20px;
  color: #999;
  font-weight: 300;
  text-transform: uppercase;
}

.track-title {
  color: #f0e567;
  font-size: 18px;
  font-weight: 500;
} 
 <!DOCTYPE html>
<html>
<body>
  <section class="other-tracks">
    <div class="track-row">
      <h6 class="small-gray">EP</h6>
      <h5 class="album-title">Fuyunohanashi</h5>
      <img src="https://i.imgur.com/JqFj5Jd.png" class="album-img" alt="Fuyunohanashi">
      <h6 class="small-gray">2019</h6>
      <ul class="a">
        <ul class="list">
          <li>
            <p class="track-title">まるつけ</p>
          </li>
          <li>
            <p class="item-gray">FUYUNOHANASHI</p>
          </li>
          <li>
            <p class="item-gray">3:52</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">冬のはなし</p>
          </li>
          <li>
            <p class="item-gray">FUYUNOHANASHI</p>
          </li>
          <li>
            <p class="item-gray">3:26</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">Marutsuke - Instrumental</p>
          </li>
          <li>
            <p class="item-gray">FUYUNOHANASHI</p>
          </li>
          <li>
            <p class="item-gray">3:50</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">Fuyunohanashi - Instrumental</p>
          </li>
          <li>
            <p class="item-gray">FUYUNOHANASHI</p>
          </li>
          <li>
            <p class="item-gray">3:26</p>
          </li>
        </ul>
      </ul>
    </div>
    <div class="track-row">
      <h6 class="small-gray">Singles</h6>
      <h5 class="album-title">夜が明ける</h5>
      <img src="https://i.imgur.com/jhyARrw.jpg" class="album-img" alt="Singles">
      <h6 class="small-gray">2020</h6>
      <ul class="a">
        <ul class="list">
          <li>
            <p class="track-title">夜が明ける</p>
          </li>
          <li>
            <p class="item-gray">夜が明ける</p>
          </li>
          <li>
            <p class="item-gray">4:41</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">へたくそ</p>
          </li>
          <li>
            <p class="item-gray">へたくそ</p>
          </li>
          <li>
            <p class="item-gray">3:06</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">ステージから君に捧ぐ</p>
          </li>
          <li>
            <p class="item-gray">ステージから君に捧ぐ</p>
          </li>
          <li>
            <p class="item-gray">4:18</p>
          </li>
        </ul>
        <ul class="list">
          <li>
            <p class="track-title">まるつけ</p>
          </li>
          <li>
            <p class="item-gray">まるつけ</p>
          </li>
          <li>
            <p class="item-gray">3:52</p>
          </li>
        </ul>
      </ul>
    </div>
  </section>
</body>
</html>
Метки: