html并排显示图片

让图片横向排列的办法，并且图片排列超出屏幕自动加滚动条。使用div标签容纳图片

    <div class="image-container">
        <img src="1.png" alt="图片1">
        <img src="2.png" alt="图片2">
        <img src="3.png" alt="图片3">
        <img src="4.png" alt="图片4">
        <img src="5.png" alt="图片5">
    </div>

使用csss设置样式

<style type="text/css">
    /*定义容器属性*/
    .image-container {
        display: flex;/*创建弹性布局*/
        flex-direction: row; /* 默认值，横向排列 column是纵向排列*/
        height: 180px;
        width: 100%; /* 设置固定宽度 */
        overflow: auto;/*里面元素超出了自动加滚动条*/
    }
    /*容器里面图片属性*/
    .image-container img{
        height: 150px;
        margin-right: 10px;
    }
</style>