1

私はコンテナ内に小さな構造を持っています.私が作ろ<li>うとしているのは.overflow-xoverflow-yfloat

この結果に到達できる方法はありますか? 水平オーバーフローのみを表示しますか?

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

html

 <div id="CockpitCenter">
    <ul class="CockpitContainerResult">
      <li><div class="box">Box 1</div></li>
      <li><div class="box">Box 2</div></li>
      <li><div class="box">Box 3</div></li>
      <li  style="height: 400px;">
          <div class="box" style="height: 370px;">Box 4</div>
      </li>
      <li><div class="box">Box 5</div></li>
      <li><div class="box">Box 6</div></li>
      <li><div class="box">Box 7</div></li>
   </ul>
 </div>​

とcss

#CockpitCenter {
   height: 500px; /* set only here in jsFiddle */
   position: fixed;
   left: 0;
   border: solid 2px #ccc;
   border-bottom: none;
   overflow: auto;
}

div#CockpitCenter ul.CockpitContainerResult {
   float: left;
   width: 100%;
}

ul.CockpitContainerResult li {
   margin: 5px 0;
   height: 150px;
   width: 50%;
   float: left;
}

ul.CockpitContainerResult li:nth-child(even) {
    float: right;
}

ul.CockpitContainerResult li div.box {
    border: solid 1px #ccc;
    margin: 15px;
    border-radius: 20px;
    height: 150px;
    text-align: center;
}​

ここにデモがあります

4

1 に答える 1

0

多くの便利なjqueryプラグインがあるカルーセルを作成しようとしているようです。とにかく、幅のパーセンテージを使用してこれを行うことはできません。メインコンテナーに固定幅を指定してから、内側のコンテナー (ul) に必要な幅を指定する必要があります。UL に幅を強制する必要があります。そうしないと、LI 要素が折り返されてしまいます。それが完了したら、'overflow-x: auto' をメイン コンテナーに追加するだけで、すぐに使用できます。

簡単な例、http://jsfiddle.net/ybJ6C/8/

現在iPadを使用していますが、スクロールバーは表示されませんでしたが、実際にスクロールします。スクロールが最後まで続くことに気付くでしょう。必要なものがわかっている場合は、幅で調整できます。動的な場合は、要素に基づいて幅を調整するために js が必要になります。高さも正確ではありませんが、アイデアを得るには十分です。（これも iPad からやっていますが、コーディングは得意ではありません）

于 2012-07-19T22:30:18.327 に答える