Html 让图片横向滚动

我试图让一行图片保持在一行内，然后使用overflow:scroll横向滚动；然而，无论我做什么，这些东西都会一直在下面

<div class="portfolio_row">
    <div class="portfolio_item">
        <a href="#">
            <img src="portfolio1.jpg"></img>
        </a>
    </div>
    <div class="portfolio_item">
        <a href="#">
            <img src="portfolio2.jpg"></img>
        </a>
    </div>
    <div class="portfolio_item">
        <a href="#">
            <img src="portfolio1.jpg"></img>
        </a>
    </div>
    <div class="portfolio_item">
        <a href="#">
            <img src="portfolio2.jpg"></img>
        </a>
    </div>
</div>

---

有人知道我如何让图片保持在一行并横向滚动，而不是让它们彼此在下面吗？

您可以使用

显示：内联块

而不是浮动。而且容器上也不需要

width

属性

.portfolio\u行{
空白：nowrap；
溢出-x：滚动；
}
.投资组合项目{
显示：内联块；
}
.投资组合项目img{
宽度：100%；
身高：100%；
}
@媒体屏幕和屏幕（最小宽度：950px）{
.投资组合项目{
宽度：50%；
}
}
@媒体屏幕和屏幕（最小宽度：1550px）{
.投资组合项目{
宽度：33%；
}
}

---

不要在

公文包项目中使用
浮动：左
类使用
显示：内联块
对齐图像


.portfolio\u行{
宽度：100%；
浮动：左；
空白：nowrap；
溢出-x：滚动；
}
.投资组合项目{
显示：内联块；
}
.投资组合项目img{
宽度：100%；
身高：100%；
}
@媒体屏幕和屏幕（最小宽度：950px）{
.投资组合项目{
宽度：50%；
}
}
@媒体屏幕和屏幕（最小宽度：1550px）{
.投资组合项目{
宽度：33%；
}
}


.portfolio_row {
    width: 100%;
    float: left;
    white-space: nowrap; 
    overflow-x: scroll;
}

.portfolio_item {
    float: left;
}

.portfolio_item img {
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 950px) {
    .portfolio_item {
        width: 50%;
    }
}
@media screen and (min-width: 1550px) {
    .portfolio_item {
        width: 33%;
    }
}