Question

我有一个座位图，可能彼此之间包含20个座位或200个座位。我不知道宽度，因此无论宽度有多大，我都希望使其宽度达到80％，并且可以水平滚动。 >

我已经尝试将其设置为：

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

或：

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

但都不起作用。

在这里摆弄代码： https://jsfiddle.net/ywzb365t/

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

水平调整大小以查看我遇到的问题。如果我不将其设置为100％宽且无法水平滚动，则会混合座位。

我很确定这只是一件简单的事情，但我无法弄清楚。任何帮助将不胜感激。

Answer 1

您必须确保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)      
  })

Answer 2

更改：

div.seatCharts-cell {
  float: left;
}

到

div.seatCharts-cell {
  display: inline;
}

使它水平滚动，但不确定是否这是所需的输出。艾伦可能会有更好的答案

Answer 3

我将.container的宽度更改为所需的80％，然后将.seatCharts-row的宽度更改为max-content。

我已经更新了您的fiddle。这是您要找的东西吗？

如何使宽度为80％的div水平滚动？

3 个答案: