1

ネストされたdivセットが3つあります。一番上のdivコンテナは灰色です。黄色のdivが含まれ、後者には5色の白いdivが含まれています。

CSSオーバーフローの動作と連続するdivの仮想ラインの連続性に問題があります（表示：インライン）。

私は自分が間違っていることを理解できません。ネストされた白いdivを1行に保持し（任意の量の白いdivに対して）、黄色のボックスの視点（または任意の視点）の最大幅に達したときの水平ナビゲーション専用のスクロールバーを使用したいと思います。代わりに、黄色のボックスの幅の制限に達すると、白いブロックの線が変わることになります。javascriptの助けを借りずに、これを簡単な方法で行う方法はありますか？

助けていただければ幸いです。

前もって感謝します。

コードは次のとおりです。

<html>
<head>
<title>Playground</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<style type="text/css">
   div#mysupracontainer {
     position: absolute;
 border:3px solid #000;
     background-color: gray;
 left:250px;
     width: 700px; 
 height: 500px;
     overflow-x: auto;
   }
   div#panels {
     position: absolute;
 border:3px solid #000;
     background-color: yellow;
 left:10px;
 width: auto;
 height: 350px;
     border-style:dotted;
 overflow-x: hidden;
   }
   .panelslide {
     display:inline;
 float: left;
 border:3px solid #000;
 position: relative;
     background-color: white;
 width: 150px;
 height: 280px;
   }
   </style>
</head>
<body>
  <div id="mysupracontainer" ><p>container</p>
     <div id="panels" ><p>panels</p>
        <div class="panelslide">panelslide-1</div>
        <div class="panelslide">panelslide-2</div>
        <div class="panelslide">panelslide-3</div>
        <div class="panelslide">panelslide-4</div>
        <div class="panelslide">panelslide-5</div>
     </div>
   </div>
 </body>
</html>
4

2 に答える 2

1

これを追加：

div#panels {
    white-space: nowrap;
)

から削除float: left;し、から.panelslideに変更display: inline;しdisplay: inline-block;ます。次のようになります。

.panelslide {
     display:inline-block;
     border:3px solid #000;
     position: relative;
     background-color: white;
     width: 150px;
     height: 280px;
}

http://jsfiddle.net/aMPxc/

于 2012-06-14T21:07:40.220 に答える
1

私が正しく理解しているかどうかはわかりませんが、内側の（白い）divを1行にまとめて、下向きではなく水平スクロールを追加しようとしている場合、これは解決策です：

次のCSSを追加しました：

   div#panels {
      overflow-y: hidden;
      height:286px;
      white-space:nowrap;
   }
   .panelslide {
      display:inline-block;
      height: 280px;
   }

これがサンプルです。

于 2012-06-14T21:07:51.593 に答える