html - css3 column-width：水平滚动时内容消失

Question

您可以在此处查看问题：http: //www.callensewout2011.dreamhosters.com/results.php?q=frankrijk

谁知道如何解决这个问题？

<div id="result-wrapper">
<a href="article.php?articleId=173&amp;q=frankrijk">
          <div class="tile" id="tile1">
                <div class="tileTextEmpty">
                     <img src="img/logos/hbvl.png" alt="Logo van Het Belang Van Limburg">
                </div>
                <div class="tileText">
                    <h4>Vliegtuig Hollande getroffen door bliksem </h4>
                    <p>De kersverse nieuwe Franse president François Hollande heeft dinsdag voor het eerst de Duitse kanselier Angela Merkel ontmoet. Hollande moest zijn reis naar Duitsland wel even...</p>
                </div>
          </div>
     </a>
</div>

#result-wrapper {
    -webkit-column-width: 340px;
    -webkit-column-gap: 0px;
    height: 649px;
    width: 1024px;
    overflow-y: auto;
    background-color: 
    black;
}

.tile {
    height: 325px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 340px;
    background-color: 
    black;
}

.tileTextEmpty {
    width: inherit;
    height: 155px;
    text-align: left;
}

.tileText {
    height: 135px;
    padding: 10px;
    background-color: black;
    opacity: .8;
    color: #EAEAEA;
    text-align: left;
}

Answer 1

为什么不使用 display:inline-block 或使用 float:left 将内容定位到容器的末尾。

如果您不知道如何使用 display:inline-block，请参阅此内容以供参考

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Answer 2

有一个 hbox 模块。它可能会有所帮助：

http://ajaxian.com/archives/css-3-flexible-box-model