Сетка на больших экранах, показывающая разрыв

ProgramBox

Сетка на больших экранах, показывающая разрыв

Post author:admin
Запись опубликована:26 марта, 2023
Post category:Вопросы по программированию

#css #materialize

#css #материализуется

Вопрос:

Я использую Materialize grid, но по какой-то причине я получаю разрыв, когда моя сетка находится на больших экранах. Я использовал Bootstrap и Materialize и понял, что использовать оба варианта было плохой идеей, поэтому я удалил Bootstrap grid и переделал его в Materialize grid.

Однако я не уверен, связано ли это с переходом на Materialize grid, поскольку у меня была такая же проблема с Bootstrap grid. Возможно, я перепутал теги сценариев и теги ссылок в моем верхнем и нижнем колонтитулах, так что, возможно, что-то перепутал.

Пожалуйста, посмотрите скриншот ниже и мой код для HTML, CSS, верхнего и нижнего колонтитулов.

 #store {
  padding: 2%;
  background-color: #c8def7;
}

.item-name {
  margin-top: 4%;
  font-size: 1.4rem;
  text-align: left;
}

.item-add {
  margin: auto;
  padding: 10px;
  margin-top: 10px;
  display: block;
  width: 100%;
  background-color: #a8323a;
  font-family: 'Open Sans', sans-serif;
}

.item {
  margin-top: 4%;
  font-family: 'Baloo Tammudu 2', cursive;
  padding: 15px;
  border-radius: 15px;
}

.price {
  color: red;
  text-align: center;
  float: right;
  font-size: 1.4rem;
}

.item-details {
  margin-top: 4%;
  text-align: center;
}

.item-pic {
  width: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/css/styles.css">

  <!-- Materialize -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <script type="text/javascript" src="index.js"></script>

  <!-- Font Awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/v4-shims.js"></script>

  <!-- Materialize -->
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Pacificoamp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Baloo Tammudu 2:wght@500amp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Open Sansamp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Libre Barcode 128 Textamp;display=swap" rel="stylesheet">


  <title></title>
</head>

<body>
  <div class="selling-items">
    <div class="row">
      <div class="col m4 l3">
        <div class="item item-1">
          <img class="item-pic item-pic-1" src="images/item-1.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-2">
          <img class="item-pic item-pic-2" src="images/item-2.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-3">
          <img class="item-pic item-pic-3" src="images/item-3.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-4">
          <img class="item-pic item-pic-4" src="images/item-4.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-5">
          <img class="item-pic item-pic-5" src="images/item-5.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-6">
          <img class="item-pic item-pic-6" src="images/item-6.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-7">
          <img class="item-pic item-pic-7" src="images/item-7.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-8">
          <img class="item-pic item-pic-8" src="images/item-8.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

Ответ №1:

В этом случае необходимо стандартизировать высоту элементов изображения

решение:

редактируйте высоту изображений в редакторе фотографий, таком как Photoshop, paint

===================== ИЛИ ======================

css:

 .item-pic {height: 20vw}

===================== ИЛИ ======================

js:

 let _height = 0;
$('.item-pic').each(function () {
    if ($(this).height() > _height) {
        _height = $(this).height();
    }
});
$('.item-pic').height(_height);

пример: https://codepen.io/Em-An/pen/ExKLZNG

Ответ №2:

Я не нахожу никаких ошибок ни в HTML-кодах, ни в стиле, и даже документ, который я создал из этих же кодов, показывает правильные результаты, которые вы могли ожидать. Попробуйте добавить поддержку браузера и обновить свой браузер. Или попробуйте поместить тег BR после желаемых продуктов.