图像网格无法正确渲染

问题描述 投票:0回答:1

美好的一天。我有一个可扩展的图像网格,我无法正确渲染。如果你在这里查看前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>
html css image-gallery
1个回答
0
投票

这绝对是你的换行符导致在这种特殊情况下改变了布局。这不是唯一的问题,但它是其中之一。

鉴于你需要将你的内容分成单独的“块”,它看起来像你正在寻找的元素是无序列表(ul)。

这本身并不能解决您的布局问题,但它允许您列出单独的<li>元素中的步骤。


此外,你有.wrapper设置为display: inline-block。这意味着只有在需要容纳其子内容时才会水平拉伸。当您使用<br>缩短线条时,没有足够的内容将容器推到其父级边缘。这应该是display: block,它会强迫.wrapper拉伸其容器的整个宽度(只要你不通过设置widthmax-width或类似的东西来约束它。


我真的建议改变你的布局,以避免使用floats。漂浮元素没有任何本质上的错误(简陋的float有悠久而古老的历史,今天仍然有用),但flexbox规范(以及grid)可以让你更加可预测地控制你的布局。

以下是flexbox如何运作的精彩概述:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我冒昧地在样式表的末尾添加一些额外的CSS规则,以显示一种可能的方式(无数的)将其转换为更多的flexbox布局。当然,您的显示需求可能会有所不同,您可能需要相应地进行调整。

作为旁注,我永远不会像你一样深深地嵌入我的选择器。当然,我不知道您正在进行的约束,在您的情况下可能需要这种特殊性。我不知道。

    #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肯定是非标准的,可能无法验证。没检查过。

再一次,我会真正研究一些较新的布局可能性(包括flexboxgrid),看看它们是否对你有用。我会以非常不同的方式实现这种布局,但我认为这取决于个人偏好。如果您需要其他帮助,请与我们联系。

© www.soinside.com 2019 - 2024. All rights reserved.