-1

同じサイズの写真がたくさんあり、それらをスライドショーに使用したいので、それらを 1 行にする必要があり、この行の幅がウィンドウの幅よりも大きく、一部の写真が画面からはみ出したい次の行に移動する代わりに。今までテーブルを使って一列に並べていましたが、テーブルを移動してこのスライドショーを作成しました。[このような：]

<table cellspacing="0" cellpadding="0">
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   ...
</table>

しかし、別の要素 [たとえば、そのテーブルのようなプロパティを持ついくつかの CSS ルールを持つ div ] を使用したいのは、テーブルが私のページでいくつかの問題を引き起こすためです。

4

3 に答える 3

2

最小限のコードで「ハック」のないソリューション。

<div style="white-space:nowrap;">
       <img src="..." />
       <img src="..." />
       <img src="..." />
       <img src="..." />
       <img src="..." />
       <img src="..." />
       ...
    </div>

デモ

于 2012-07-12T08:47:59.367 に答える
1

ねえ今このフォーマットに慣れている

<div class="slideshow">
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   ...
</div>

Css

.slideshow{
white-space: nowrap;
}
.slideshow img{
vertical-align:top;
}
于 2012-07-12T08:50:27.500 に答える
1

最も一般的には、このようなスライダー プラグインでは順序付けられていないリストが使用されます。

<ul>
   <li><img .../></li>
   <li><img .../></li>
   <li><img .../></li>
</ul>

と

li{float:left;}

これには、より多くの要素を要素に入れることができるという利点があります<li>(例: 画像 + 説明 + 短いテキスト)。

ただし、プレーンな div も使用できます

<div>
  <img />
  <img />
</div>

より多くの要素をグループ化する場合 (画像の説明など)、追加の div でそれらをラップする必要があります。（これにより、効果的にULに戻ります...）

<div>
  <div><img /> Text</div>
  <div><img /> more Text</div>
</div>

参考までに、テーブルを使用する正しい方法は次のとおりです。

<table>
   <tr>        <!-- the row -->
     <td></td> <!-- columns -->
     <td></td> <!-- columns -->
   </tr>
</table>
于 2012-07-12T08:47:23.243 に答える