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;
}

編集:-「。」を追加しました クラス名の前にフィドルリンクを参照してくださいHERE

于 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

これを試して：

index.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 に答える