Question

当我的外部div具有固定的高度和宽度时，我想显示内部div内联和水平滚动。

HTML：

<!-- fixed height and width -->
<div class="outer"> 
   <!-- inner dives which will display horizontally scrolled -->
   <div class="inner"></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

CSS：

.inner {
    max-width:100; 
    height:60px; 
    border: 1px thin #333;
}

.outer {
   width: 300px;
   overflow-x: scroll;
   overflow-y: hidden;
   height: 320px;
}

Answer 1

你的.inner的最大宽度为100，没有单位。我假设px？如果是这样，那么你想要的东西是水平滚动而没有包装？如果是这样，这应该做你想要的：

.inner
{
    display: inline-block; /* makes your divs side-by-side */
    max-width:100px;
    height:60px;
    border: 1px solid #333;
}

.outer {
    white-space: nowrap; /* makes all your inner divs stay on the same line */
    width: 300px;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 320px;
}

演示：http://jsfiddle.net/zzqhcvof/

在固定div中实现水平滚动

1 个答案: