CSS列巨大的空白底部

我有一个使用CSS-列的图像库，但在列封装的底部总是有一个巨大的空白。我已经读过设置display：block到元素可以解决这个问题，但是在这种情况下它没有任何区别。CSS列巨大的空白底部

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

理解任何指针看出。

来源

2014-05-11 Jack Wild

尝试在'min-height'中添加 –

它必须与高度或您使用的JavaScript有关，因为如果您添加新元素或删除现有元素，则所有内容都会到位 –

您在哪里阅读过可以用'display：block'来修复;'？我遇到了同样的问题，我找不到任何地方的文档。 – deonclem

你可以给你的照片都一样的高度。

#hodgePodge img { 
    height: 800px;

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

但是，如果您将所有图片都分为一个单独的课程，您可以按照自己的想法设计它们。

来源

2014-05-11 12:53:54 Teun

CSS列巨大的空白底部

回答

相关问题