Html css3列宽：水平滚动时内容会消失

您可以在此处查看此问题：

谁知道如何解决这个问题

<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;
}

#结果包装器{
-webkit列宽：340px；
-webkit柱间隙：0px；
高度：649px；
宽度：1024px；
溢出y：自动；
背景色：
黑色
}
.瓷砖{
高度：325px；
背景位置：中上；
背景重复：无重复；
背景尺寸：340px；
背景色：
黑色
}
.Tiletexty{
宽度：继承；
高度：155px；
文本对齐：左对齐；
}
.tileText{
高度：135px；
填充：10px；
背景色：黑色；
不透明度：.8；
颜色：#EAEAEA；
文本对齐：左对齐；
}

有一个hbox模块。这可能有助于：

---

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

如果您不知道如何使用display:inline块，请参见此参考

---

但是，除了mozilla和webkit之外，flexible box型号不起作用browsers@Ravi专栏也是如此，事实上，灵活的盒子模块是由IE10支持的。很好，IE终于在所有浏览器巨头很久以前就实现了它：）