画像の水平配置とスクロール効果を実現するCSS

小云云
リリース: 2017-12-09 10:15:34
オリジナル
6413 人が閲覧しました

この記事では主に画像の水平方向の配置とスクロール効果を実現するための CSS を紹介します。必要な方はぜひ参考にしてください。

具体的なコードは次のとおりです:

.imageList{
        overflow-x: auto;
        overflow-y: hidden;
        height:180px;
        white-space: nowrap;
      img{
        width:auto;
        height:100%;
        margin-right:10px;
      }
 }
ログイン後にコピー

<p class="imageList">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    <img src="3.jpg"/>
    <img src="4.jpg"/>
    <img src="1.jpg"/>
</p>
ログイン後にコピー

ここで、imgタグをフローティングのままにすることはできず、外部コンテナは改行なしで追加する必要があることに注意してください

white-space: nowrap;
ログイン後にコピー

関連する推奨事項:

非同期画像アップロードメソッドの JavaScript 実装の例

CSS3 画像混合の使用方法

CSS を使用して画像回転効果を作成する方法

以上が画像の水平配置とスクロール効果を実現するCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!