Сетка изображения не отображается правильно - PullRequest
Новая
       33

Сетка изображения не отображается правильно

0 голосов
/ 08 апреля 2019

Добрый день. У меня есть расширяемая сетка изображений, и у меня возникают проблемы с правильным отображением. Если вы посмотрите на первые 3 изображения здесь: http://rthhockey.com/full-ice расширяемое текстовое содержимое рендерится иначе (расположение текста), чем текстовое содержимое изображения 4-12. Поскольку я добавляю пользовательский контент, единственное, что я могу понять, что я делаю по-другому, это добавление тега
. Мне нужны отдельные строки в этом контенте, и
- единственный способ добавить разрыв строки, который я знаю. Может ли это быть причиной проблемы? Или вы видите что-то еще, что мне не хватает, что вызывает это искажение? Заранее благодарим за любую помощь, которую вы можете оказать мне.

МОЙ КОД 

CSS

html, body {
  font-family: "Helvetica Neue", "Helvetica", open sans;
}
h1 {
font-family: open sans;
color: #494949;
font-weight: bold;
}

.hide {
  display: none;
}

#gallerly.container {
  width: 100%;
}

#gallerly .image-viewer {
  position: relative;
}

#gallerly .image-viewer .preview {
  position: absolute;
  width: 100%;
  background-color: #1D1D1D;
  border: 1px solid #f1f1f1;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  border-radius: 0px;
}

#gallerly .image-viewer .preview img {
  float: left;
  height: 280px;
  margin-right: 10px;
}

#gallerly .image-viewer > a > img {
  height: 150px;
}

#gallerly .image-viewer > a {
  cursor: pointer;
  border: 1px solid #f1f1f1;
  padding: 3px;
  margin: 5px;
  display: inline-block;
}

#gallerly .image-viewer > a:hover {
  border: 1px solid #aaa;

}

#gallerly * {
  position: relative;
  -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

#gallerly .thumbnail.move-down {
  top: 346px;
}

#gallerly .preview .description {
}

#gallerly .preview a {
  cursor: pointer;
  color: white;
  font-weight: 500;
}

#gallerly .preview .wrapper {
  position: relative;
  display: inline-block;
}

#gallerly .preview .close-preview {
  position: absolute;
  top: 8px;
  right: 5px;
}

#gallerly .preview .prev {
  position: absolute;
  left: 6px;
  top: 50%
}

#gallerly .preview .next {
  position: absolute;
  right: 6px;
  top: 50%
}

#gallerly .preview .preview-content {
  margin-left: 70px;
  margin-right: 70px;
}

#gallerly .preview .title {
  color: #ffffff;
  font-weight: semi-bold;
  text-decoration: underline;
}

#gallerly .preview .description {
  color: #ffffff;
  font-size: 15px;
}

#gallerly .preview .arrow {
  border-bottom: 10px solid #222;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  height: 0;
  position: absolute;
  top: -10px;
  width: 0;
}

HTML

 <div id="gallerly" class="container">
      <div class="image-viewer">
        <a class="thumbnail"><img src="https://i.imgur.com/1YxdIW1.png?1" data-title="Jackson 5" data-description="3 Skaters run this drill at one time with all 3 attempting a shot on goal<br>F1 Skates top of circle and takes shot on goal<br>F2 Skates full circle without a puck<br>F3 Skates an inside/out pattern around face-off dot with puck, breaks on goal, and takes a shot<br>F1 picks up puck below far circle, matches timing of F2 through the neutral zone, and dishes pass to F2<br>F2 breaks in on goal with a shot while F1 crashes net for rebound"/></a>
        <a class="thumbnail"><img src="https://i.imgur.com/awFVVcL.png" data-title="Chip To Speed" data-description="Form 2 equal lines in each corner<br>First player in each line(F1 & F2) skates to top of circle with F1 carrying a puck<br>F1 passes to F2 at top of circle<br>F2 then passes to first player in line 1<br>Line 1 then passes cross-ice to F1<br>F1 & F2 then loop through neutral zone and break in 2 x 0 vs goaltender"/></a>
        <a class="thumbnail"><img src="https://i.imgur.com/LHEOwdq.png"  data-title="4 Dot Skate & Shoot" data-description="Drill is designed to have players work on passing while skating hard around the cones and finish with a 2 on 0 shot<br>Players split into two corners with pucks in one corner<br>First player from each line skate on whistle passing puck back and forth as often as possible during first cycle through cones<br>Skaters will cycle a second time through cones breaking in on net 2 on 0 and taking a shot<br>Next two players in line will start as group 1 breaks in on goal"/></a>

        <a class="thumbnail"><img src="https://i.imgur.com/qGNYydr.png" data-title="Figure Eight 2 x 0" data-description="First player in each line(F1 & F2) skates to top of circle with F1 carrying a puck

F1 passes to F2 at top of circle

F2 then passes to first player in line 1

Line 1 then passes cross-ice to F1

F1 & F2 then loop through neutral zone and break in 2 x 0 vs goaltender"/></a>
        <a class="thumbnail"><img src="https://i.imgur.com/5uPxWsr.png" data-title="NASA Earth Image" data-description="Earth, also called the world[n 5] (and, less frequently, Gaia[n 6] or, in Latin, Terra[26]), is the third planet from the Sun, the densest planet in the Solar System, the largest of the Solar System's four terrestrial planets, and the only astronomical object known to accommodate life. The earliest life on Earth arose at least 3.5 billion years ago."/></a>
        <a class="thumbnail"><img src="https://i.imgur.com/awFVVcL.png" data-title="NASA Earth Image" data-description="Earth, also called the world[n 5] (and, less frequently, Gaia[n 6] or, in Latin, Terra[26]), is the third planet from the Sun, the densest planet in the Solar System, the largest of the Solar System's four terrestrial planets, and the only astronomical object known to accommodate life. The earliest life on Earth arose at least 3.5 billion years ago."/></a>

        <a class="thumbnail"><img src="https://i.imgur.com/LHEOwdq.png" data-title="NASA Earth Image" data-description="Earth, also called the world[n 5] (and, less frequently, Gaia[n 6] or, in Latin, Terra[26]), is the third planet from the Sun, the densest planet in the Solar System, the largest of the Solar System's four terrestrial planets, and the only astronomical object known to accommodate life. The earliest life on Earth arose at least 3.5 billion years ago."/></a>
        <a class="thumbnail"><img src="https://i.imgur.com/qGNYydr.png" data-title="NASA Earth Image" data-description="Earth, also called the world[n 5] (and, less frequently, Gaia[n 6] or, in Latin, Terra[26]), is the third planet from the Sun, the densest planet in the Solar System, the largest of the Solar System's four terrestrial planets, and the only astronomical object known to accommodate life. The earliest life on Earth arose at least 3.5 billion years ago."/></a>
        <a class="thumbnail"><img src="https://i.imgur.com/5uPxWsr.png" data-title="NASA Earth Image" data-description="Earth, also called the world[n 5] (and, less frequently, Gaia[n 6] or, in Latin, Terra[26]), is the third planet from the Sun, the densest planet in the Solar System, the largest of the Solar System's four terrestrial planets, and the only astronomical object known to accommodate life. The earliest life on Earth arose at least 3.5 billion years ago."/></a>

        <a class="thumbnail"><img src="https://i.imgur.com/awFVVcL.png" data-title="NASA Earth Image" data-description="Earth, also called the world[n 5] (and, less frequently, Gaia[n 6] or, in Latin, Terra[26]), is the third planet from the Sun, the densest planet in the Solar System, the largest of the Solar System's four terrestrial planets, and the only astronomical object known to accommodate life. The earliest life on Earth arose at least 3.5 billion years ago."/></a>
        <a class="thumbnail"><img src="https://i.imgur.com/LHEOwdq.png" data-title="NASA Earth Image" data-description="Earth, also called the world[n 5] (and, less frequently, Gaia[n 6] or, in Latin, Terra[26]), is the third planet from the Sun, the densest planet in the Solar System, the largest of the Solar System's four terrestrial planets, and the only astronomical object known to accommodate life. The earliest life on Earth arose at least 3.5 billion years ago."/></a>
        <a class="thumbnail"><img src="https://i.imgur.com/qGNYydr.png" data-title="NASA Earth Image" data-description="Earth, also called the world[n 5] (and, less frequently, Gaia[n 6] or, in Latin, Terra[26]), is the third planet from the Sun, the densest planet in the Solar System, the largest of the Solar System's four terrestrial planets, and the only astronomical object known to accommodate life. The earliest life on Earth arose at least 3.5 billion years ago."/></a>
        <div class="preview hide">
          <div class="wrapper">
            <span class="arrow"></span>
            <a class="prev">← Prev</a>
            <div class="preview-content">
              <img src="" />
              <div class="content">
                <h3 class="title"></h3>
                <span class="description"></span>
              </div>
            </div>
            <a class="next">Next →</a>
            <a class="close-preview">Close</a>
          </div>
      </div>
    </div>

1 Ответ

0 голосов
/ 09 апреля 2019

Это определенно ваши разрывы строк, которые вызывают изменение макета в этом конкретном случае.Это не единственная проблема, но это одна из них.

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

Это само по себе не решит проблему макета, но позволит вам перечислить шаги в отдельных <li> элементах.

Кроме того, для .wrapper установлено значение display: inline-block.Это означает, что он будет растягиваться только горизонтально, насколько это необходимо для размещения его дочернего содержимого.Когда вы укорачиваете свои строки с помощью <br>, недостаточно содержимого, чтобы подтолкнуть ваш контейнер к краям его родителя.Вероятно, это должно быть display: block, что приведет к тому, что .wrapper заставит растянуть всю ширину его контейнера (если вы не ограничите его установкой width или max-width или что-то в этом роде)..

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

Вот отличный обзор того, как работает flexbox: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

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

    #gallery .preview .preview-content {
      display: flex;
      align-items: flex-start;
      padding: 48px;
    }

    #gallery .preview .preview-content img {
      display: block;
      flex-basis: 250px;
      height: auto;
    }

    #gallery .preview .description {
      flex-grow: 1;
    }

Я также изменил теги привязки без HREF на <button>, что более семантически уместно в этом случае.Вам, очевидно, потребуется стилизовать их, чтобы удалить стилизацию пользовательского агента браузера по умолчанию, но включение anchor без HREF определенно является нестандартным и, вероятно, не будет проверяться.Не проверял

Опять же, я бы действительно исследовал некоторые новые возможности макета (в том числе flexbox и grid) и посмотрел, не покажутся ли они вам полезными.Я бы реализовал этот макет совсем по-другому, чем у вас, но это зависит от личных предпочтений, я полагаю.Дайте мне знать, если вам нужна дополнительная помощь.

...