G帅T 2023-03-16 10:41 采纳率: 75.3%
浏览 34
已结题

html5图片排班问题

img


有什么方法可以将下面的大图片给一到那个小图片的右边吗?
还有就是我想将多个小图片放在一行上面使浏览界面是可以向左右滚动的如何实现,我最多放两张小的再放就谈到下一行去了,不会导致它能左右滑动

  • 写回答

2条回答 默认 最新

  • 追cium 2023-03-16 11:00
    关注

    参考GPT和自己的思路:

    针对你的第一个问题,你可以使用 CSS 的浮动属性来将大图片和小图片放在同一行,让大图片浮动到左边,小图片浮动到右边。具体的代码可以是:

    <div>
      <img src="big.jpg" style="float: left; margin-right: 10px;" />
      <img src="small.jpg" style="float: right;" />
    </div>
    

    针对你的第二个问题,你可以将小图片放在一个容器内,并给予该容器固定的宽度,超出这个宽度的图片将被隐藏。使用 CSS 的 overflow 属性来实现滚动条,具体代码可以是:

    <div style="overflow-x: auto; white-space: nowrap;">
      <div style="display: inline-block; width: 300px;">
        <img src="small1.jpg" />
      </div>
      <div style="display: inline-block; width: 300px;">
        <img src="small2.jpg" />
      </div>
      <div style="display: inline-block; width: 300px;">
        <img src="small3.jpg" />
      </div>
      <div style="display: inline-block; width: 300px;">
        <img src="small4.jpg" />
      </div>
    </div>
    

    其中,外层容器设置了 overflow-x 属性为 auto,表示在需要时显示水平滚动条,white-space 属性为 nowrap,可以使小图片水平不换行;内层容器设置了固定的宽度,使得能够容纳两张小图片,在浏览器窗口不足宽度时,水平滚动条将出现。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 3月23日
  • 已采纳回答 3月16日
  • 创建了问题 3月16日

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了