图像网格绘制不正确

Question

日安。我有一个可扩展的图像网格，我有困难得到正确渲染。如果您在这里查看前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>

Answer 1

在这种特殊情况下，导致布局改变的是智能断行。这不是唯一的问题，但这是其中之一。

考虑到您需要将内容分离成单独的“块”，您所要查找的元素实际上是一个无序列表(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>，在这种情况下，这在语义上更合适。您显然需要对它们进行样式设置，以删除浏览器默认的用户代理样式，但是包含没有HREF的anchor绝对是不标准的，而且可能不会验证。还没有检查。

再次，我将研究一些较新的布局可能性(包括flexbox和grid)，看看它们是否对您有帮助。我将实现这个布局与您的非常不同，但这是个人的喜好，我想。如果你需要额外的帮助，请告诉我。