Html 如何使多个div水平滚动？_Html_Css_Scroll

Html 如何使多个div水平滚动？

html css scroll

Html 如何使多个div水平滚动？,html,css,scroll,Html,Css,Scroll,我希望我的平铺在同一行，如果平铺超出容器的宽度，容器将水平滚动。在下面的演示中，瓷砖被添加到下一行，因此我必须垂直滚动才能访问它们。我如何使水平滚动工作，并保持所有瓷砖在同一行 <body> <div class="container"> <div style="display: inline-block" class="floatLeft"> <img class="tile"> </div> <div style="

我希望我的平铺在同一行，如果平铺超出容器的宽度，容器将水平滚动。在下面的演示中，瓷砖被添加到下一行，因此我必须垂直滚动才能访问它们。我如何使水平滚动工作，并保持所有瓷砖在同一行

<body>
<div  class="container">
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
</div>
</body>

.container{
宽度：600px；
最大高度：140像素；
边框：1px纯绿色；
溢出-x：滚动；
溢出y：滚动；
空白：nowrap；
}
.瓷砖{
宽度：200px；
高度：92px；
浮动：左；
保证金：10px 10px 50px 10px；
背景：矢车菊蓝；
}

将display:inline块添加到包含divs的css中：

.floatleft{
 display: inline-block;
}

<body>
<div  class="container">
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
</div>
</body>

或者，也可以将其添加为每个div上的样式属性：

<body>
<div  class="container">
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
</div>
</body>

这是工作小提琴：

<body>
<div  class="container">
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
</div>
</body>

我希望我的平铺在同一行，如果平铺超出容器的宽度，容器将水平滚动

<body>
<div  class="container">
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
</div>
</body>

您的

.container

类的固定值为

480px

。如果这是有意的，那么您只需将

display:inline block

添加到

.floatLeft

类中，如下所示：

<body>
<div  class="container">
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
</div>
</body>

.container > .float-left {
    display: inline-block;
}

否则，您可以使

.container

类具有灵活的宽度。如果您喜欢该建议，您可以将宽度更改为

minwidth:480px

，这样您的宽度将随内容而扩展

<body>
<div  class="container">
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
</div>
</body>

.container {
  min-width: 480px; /* changes occurred here */
  max-height: 140px;
  border: 1px solid green;
  overflow-x: scroll;
  overflow-y: scroll;
  white-space: nowrap;
}

但是，如果您的屏幕宽度太小，无法容纳许多平铺，则它们将在新行中垂直对齐，这是正常的预期行为。或者更好的是，你可以两者兼得。您可以选择。

HTML：

<body>
<div  class="container">
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
</div>
</body>

<div  class="container" id="content">
    <div >
        <img src="img" height="190">
       <img src="img" height="190">
</div>

您需要设置

overflow-x:scroll和溢出-y：隐藏和空白：nowrap和显示：内联块打开<代码>浮动左

<body>
<div  class="container">
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
</div>
</body>


.container{
宽度：480px；
高度：140像素；
边框：1px纯绿色；
溢出-x：滚动；
溢出y：隐藏；
}
.内部{
身高：100%；
空白：nowrap；
}
.左{
宽度：200px；
高度：92px；
保证金：10px 10px 50px 10px；
显示：内联块；
}
img{
身高：100%；
}

我将进行CSS更改，而不是在以下行中添加样式：.container>.floatLeft{display:inline block；}
您将错误的元素浮动到左侧。.tile
类都包装在其他分区中！谢谢使用内部div的原因是什么。我可以看到它是有效的，但我只是想知道，为什么有必要使用它？对于空白：无换行，但也可以在没有内部div的情况下使用它