这是我的CSS:
.contain
{
min-width: 300px;
background: black;
height: 200px;
display: inline-block;
overflow: auto;
}
.inl1{
/* margin: 5px 5px 5px 5px; */
min-width: 300px;
background: blue;
width: 400px;
height: 200px;
}
<div class=contain>
<div class=inl1></div>
</div>
<div class=contain>
<div class=inl1></div>
</div>
很明显,这两个 div 内联显示,这正是我想要的。
但是,当浏览器的尺寸调整得更小时,div 会一个一个地显示在另一个上方(期望的行为),但是一旦我使浏览器窗口小于最小宽度,我就需要显示水平滚动条。这不会发生。
关于为什么的任何帮助?
已编辑:我尝试了此处的建议,但它们似乎都破坏了浏览器尺寸较小时 div 相互堆叠的预期行为。
我追求的效果:
在足够宽的浏览器中内联显示 div(没有滚动条);但是在“窄”浏览器(即移动设备)中,一个一个地显示 div,然后在每个 div 不再显示最小宽度时添加水平滚动。
我觉得这样更清楚一些......
最佳答案
你只需要有一个 div 的包装器并设置它
.wrapper{
min-width: 100%;
white-space: nowrap;
}
这是 fiddle :https://jsfiddle.net/1hshzxah/3/
关于html - 调整浏览器大小时的内联 block 滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36842817/