效果图
在这里每一个div标签包裹着一张图片和一行文字
以下代码直接copy看效果
<div class="banner">
<div class="one">
<img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片">
<p>元气少女妆</p>
</div>
<div class="one">
<img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片">
<p>元气少女妆</p>
</div>
<div class="one">
<img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片">
<p>元气少女妆</p>
</div>
</div>
.banner {
width: 100%;
height: 100%;
overflow-x: scroll; /*添加横向滚动条*/
white-space: nowrap;/*不换行*/
}
.one {
width: 45%;
margin-right: 2%;
display: inline-block;/*设为inline-block*/
}
.one img {
width: 100%;
height: 80%;
}
.one p {
font-size: 18px;
margin-left: 20px;
margin-top: 10px;
color: #FFF;
}