代码之家 › 专栏 › 技术社区 › David Lytle

图像网格未正确渲染

image-gallery css html

0

David Lytle · 技术社区 · 7 年前

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>

0 回复 | 直到 7 年前

1

0

Donkey Shame 7 年前

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

考虑到您需要将内容分离成单独的“块”,那么您要查找的元素看起来确实是一个无序的列表( ul ).

这并不能解决你的布局问题,但它可以让你,嗯,单独列出步骤 <li> 元素。

.wrapper display: inline-block . 这意味着它只会水平伸展到需要容纳其子内容的程度。当你用 <br> 的,没有足够的内容将容器推到其父容器的边缘。这应该是 display: block ,会产生强迫的效果 .包装纸 拉伸其容器的整个宽度(只要不通过设置 width 或 max-width

我真的建议你改变布局,以避免使用 float s、浮动元素没有本质上的错误(谦卑它有着悠久而古老的历史,并且在今天仍然有用),但是 flexbox grid

挠性箱 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;
    }

<button> ,这在语义上更合适。显然,您需要设置它们的样式以删除浏览器的默认用户代理样式,但包括 anchor

再次,我将真正研究一些新的布局可能性(包括 网格 )看看它们对你是否有用。我会用和你完全不同的方式来实现这个布局,但我想这要取决于个人喜好。如果你需要额外的帮助,请告诉我。