14

我做了一个带有图片元素列表的水平滚动。但是当我垂直滚动它时，我没能做到。

我的水平滚动条代码是

<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
    <div class="pic-row">
        <div id="divd" style="width: 1680px;">
            <a href="writeA.html"><img src="images/A.Png" /></a>
            <a href="writeB.html"><img src="images/B.Png" /></a>
            <a href="writeC.html"><img src="images/C.Png" /></a>
            <a href="writeD.html"><img src="images/D.Png" /></a>
            <a href="writeE.html"><img src="images/E.Png" /></a>
            <a href="writeF.html"><img src="images/F.Png" /></a>
            <a href="writeG.html"><img src="images/G.Png" /></a>
            <a href="writeH.html"><img src="images/H.Png" /></a>
            <a href="writeI.html"><img src="images/I.Png" /></a>
            <a href="writeJ.html"><img src="images/J.Png" /></a>
            <a href="writeK.html"><img src="images/K.Png" /></a>
            <a href="writeL.html"><img src="images/L.Png" /></a>
            <a href="writeM.html"><img src="images/M.Png" /></a>
            <a href="writeN.html"><img src="images/N.Png" /></a>
            <a href="writeO.html"><img src="images/O.Png" /></a>
            <a href="writeP.html"><img src="images/P.Png" /></a>
            <a href="writeQ.html"><img src="images/Q.Png" /></a>
            <a href="writeR.html"><img src="images/R.Png" /></a>
            <a href="writeS.html"><img src="images/S.Png" /></a>
            <a href="writeT.html"><img src="images/T.Png" /></a>
            <a href="writeU.html"><img src="images/U.Png" /></a>
            <a href="writeV.html"><img src="images/V.Png" /></a>
            <a href="writeW.html"><img src="images/W.Png" /></a>
            <a href="writeX.html"><img src="images/X.Png" /></a>
            <a href="writeY.html"><img src="images/Y.Png" /></a>
            <a href="writeZ.html"><img src="images/Z.Png" /></a>
        </div>

我使用的css如下

.pic - container {
  /* The width of mydocument */
  width: 1350 px;
  margin: 0 auto;
  white - space: nowrap;
  overflow - x: inherit;
  overflow - y: hidden; -
  ms - overflow - style: -ms - autohiding - scrollbar;

}
.pic - row {
  /* As wide as it needs to be */
  width: 1527 px;
}

请指导我找到一个解决方案，使水平滚动 div 变为垂直滚动

4

3 回答 3

28

使用下面的 css

.pic-container {
    width: 50px;
    height: 200px;
    overflow-y: scroll;
    overflow-x:hidden;
}

编辑：- 添加了一个“。” 在类名之前，请参见此处的小提琴链接

于 2013-09-23T07:14:56.170 回答
1

您必须为水平滚动设置主 div 的固定高度，如果您的内部内容高度超过主 div 的高度，则水平滚动将会出现。

.pic-container {
  width: 1350px;
  margin: 0 auto;
  white-space: nowrap;
}

.pic-row {
  /* As wide as it needs to be */
  width: 1350px;
  height: 400px;
  overflow: auto;
}

.pic-row a {
  clear: left;
  display: block;
}
<div class="pic-container">
  <div class="pic-row">
    <a href="writeA.html"><img src="images/A.Png" /></a>
    <a href="writeB.html"><img src="images/B.Png" /></a>
    <a href="writeC.html"><img src="images/C.Png" /></a>
    <a href="writeD.html"><img src="images/D.Png" /></a>
    <a href="writeE.html"><img src="images/E.Png" /></a>
    <a href="writeF.html"><img src="images/F.Png" /></a>
    <a href="writeG.html"><img src="images/G.Png" /></a>
    <a href="writeH.html"><img src="images/H.Png" /></a>
    <a href="writeI.html"><img src="images/I.Png" /></a>
    <a href="writeJ.html"><img src="images/J.Png" /></a>
    <a href="writeK.html"><img src="images/K.Png" /></a>
    <a href="writeL.html"><img src="images/L.Png" /></a>
    <a href="writeM.html"><img src="images/M.Png" /></a>
    <a href="writeN.html"><img src="images/N.Png" /></a>
    <a href="writeO.html"><img src="images/O.Png" /></a>
    <a href="writeP.html"><img src="images/P.Png" /></a>
    <a href="writeQ.html"><img src="images/Q.Png" /></a>
    <a href="writeR.html"><img src="images/R.Png" /></a>
    <a href="writeS.html"><img src="images/S.Png" /></a>
    <a href="writeT.html"><img src="images/T.Png" /></a>
    <a href="writeU.html"><img src="images/U.Png" /></a>
    <a href="writeV.html"><img src="images/V.Png" /></a>
    <a href="writeW.html"><img src="images/W.Png" /></a>
    <a href="writeX.html"><img src="images/X.Png" /></a>
    <a href="writeY.html"><img src="images/Y.Png" /></a>
    <a href="writeZ.html"><img src="images/Z.Png" /></a>
  </div>
</div>

于 2013-09-23T06:40:30.653 回答
1

尝试这个：

索引.html：

.pic-container {
  width: 600px;
  height: 600px;
  overflow-y: scroll;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="pic-container">
    <a href="writeA.html"><img src="images/A.png" /></a>
    <a href="writeB.html"><img src="images/B.png" /></a>
    <a href="writeC.html"><img src="images/C.png" /></a>
    <a href="writeD.html"><img src="images/D.png" /></a>
    <a href="writeE.html"><img src="images/E.png" /></a>
  </div>
</body>

</html>

于 2013-09-23T06:47:28.147 回答