Question

我有一个使用CSS-Columns的图片库，但是在列包装器的底部总是有一个巨大的空白区域。我已经读过设置显示：块到元素可以解决这个问题，但在这种情况下没有任何区别。

html结构是：

<div id='hodgePodge'>

  <a href="joatmos.pdf" target="blank">
  <div class="projectTile">
    <img class = 'hodgeimg' src = 'imagelink' alt="Hodge Image">
    <div class="projectHoverBg"></div>
    <div class="aboutProject">
      <h2>Description</h2>
    </div>
  </div>
  </a>

  <div class="projectTile">
    <img class = 'hodgeimg' src = 'imagelink' alt="Hodge Image">
    <div class="projectHoverBg"></div>
    <div class="aboutProject">
      <h2>Description</h2>
    </div>
  </div>

    etc......
</div>

，CSS是：

#hodgePodge
    margin-top menu-height
    width 100%
    padding-bottom -30px
    columns 2
    column-gap 0
    background accent-col
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
    -webkit-backface-visibility:hidden;
    img
        width 100%
        display block
    .projectTile
        overflow hidden
        position relative
        .projectHoverBg
            width 100%
            height 100%
            background black
            opacity: 0
            position absolute
            top 0
            left 0
            z-index 2
        .aboutProject
            position absolute
            padding 0 0 0 30px
            bottom 0
            width 100%
            z-index 3

问题可见http://www.isjackwild.com/hodge.html

任何指示赞赏。

Answer 1

你可以给你的照片提供相同的高度。

#hodgePodge img {
    height: 800px;

然后你的照片都是一样的高度。

但是如果你把你所有的照片分别作为一个单独的课程，你可以根据自己的喜好设计它们。

CSS列底部有巨大的空白区域

1 个答案: