Question

美好的一天。我有一个可扩展的图像网格，无法正确渲染。如果您在此处查看前三个图像：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或{ {1}}之类的。

我真的建议您更改布局以避免使用max-width。浮动元素没有本质上的错误（谦虚的float有着悠久而古老的历史，并且在今天仍然有用），但是float规范（以及flexbox也可以）为您提供对布局的更可预测的控制。

以下是grid的工作原理的概述：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我已自由地在样式表的末尾添加了一些其他CSS规则，以显示（多种）一种将其转换为更多Flexbox布局的可能方法。当然，您的显示需求可能会有所不同，您可能需要相应地进行调整。

作为旁注，我永远不会像您一样深入选择器。当然，我不知道您要遵循的约束条件，因此针对您的情况可能需要一定程度的特异性。我不知道。

flexbox

我还将您的无HREF锚标记更改为#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和flexbox），看看它们是否对您没有帮助。我将以与您完全不同的方式来实现此布局，但是我认为这取决于个人喜好。让我知道您是否需要其他帮助。

图片网格无法正确呈现

1 个答案: