时间戳

首页 > 解决方案 > 如何使 80% 宽度的 div 可水平滚动？

html - 如何使 80% 宽度的 div 可水平滚动？

问题描述

我有一张座位图，其中可能包含彼此相邻的 20 个座位或 200 个座位。我不知道宽度，所以我想让它的宽度为 80%，并且可以水平滚动，不管它有多宽。

我已经尝试将其设置为：

overflow-x: auto;
white-space: nowrap;

或者：

overflow-x: scroll;
overflow-y: hidden;

但两者都不起作用。

这是一个代码： https ://jsfiddle.net/ywzb365t/

我需要水平滚动的 div 是#seat-map.

水平调整大小以查看我遇到的问题。如果我不让它 100% 宽和水平滚动，它会混淆座位排。

我很确定这只是一件简单的事情，但我无法弄清楚。任何帮助是极大的赞赏。

标签： htmlcss

解决方案

你必须确保它seatCharts-row等于内容然后seatCharts-container有overflow-x:auto

我在这里写了一个小修复，它会改变seatCharts-row宽度。

将此代码放在底部$(document).ready(function()

  $(".seatCharts-container").css({ overflow:"hidden",  "overflow-x" :"auto" })

  $(".seatCharts-container > .seatCharts-row").each(function(){
   var width =($(this).children().length * $(this).children().first().outerWidth(true))
   $(this).width(width)      
  })

推荐阅读