1

divには4つの画像があります。すべての画像を同じ行でスクロールできるようにしたいのですが、すべての画像が別の行にドロップダウンしないようにするにはどうすればよいですか？

<style>
.more-product-images {
    height:90px;
    background-color:#000;
    width:1000px;
    overflow:scroll;
    overflow-y:hidden;
}
</style>

<div class="more-product-images">
            <a href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_a12aec4157fe68e01dc1d608627a4734.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_a12aec4157fe68e01dc1d608627a4734.jpg" width="120" height="92" alt="" title=""></a>
            <a href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_b6f3583a3718298533f4f1f1ae58b690.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_b6f3583a3718298533f4f1f1ae58b690.jpg" width="120" height="92" alt="" title=""></a>
            <a href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_db4093c431282a16ff3e80767b3f8ecc.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_db4093c431282a16ff3e80767b3f8ecc.jpg" width="120" height="92" alt="" title=""></a>
            <a href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_df2173694b2e1cc56e443a4103f02ede.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_df2173694b2e1cc56e443a4103f02ede.jpg" width="120" height="92" alt="" title=""></a>
</div>
4

4 に答える 4

1

これはそれを行う必要があります：

.more-product-images img {
    float: left;
}

しかし、ここにもっと詳細な例があります:(簡単にするためにアンカータグをインラインブロックにし、画像を削除しました。

http://jsfiddle.net/f8Cd3/

また、個々の画像から幅と高さの属性を削除し、cssを使用して幅と高さを適用することをお勧めします。

于 2013-03-25T14:42:33.567 に答える
1

float：leftを使用する必要があり、cssでサイズを定義する方が適切です。

.more-product-images img {
     width: 120px;
     height: 92px;
     float: left;
}

これはfloat：leftを使用したコードです

そして多分あなたは次のように画像の間にマージンを置くことを検討するべきです：margin-left：5px

于 2013-03-25T15:01:22.263 に答える
0

クラスfloat: left;内で使用します。lightbox-processed

于 2013-03-25T14:41:21.130 に答える
0

タイトルと説明にはスクロールという単語を使用します。カルーセル効果が必要ですか？このようなものを探しているようですね http://flex.madebymufffin.com/examples/basic-carousel.html

<style>
.more-product-images {
height:90px;
background-color:#000;
width:1000px;
overflow:scroll;
overflow-y:hidden;
}

.boxes {width: 25%; display: flex-box;}
 </style>

<div class="more-product-images">
        <a           href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_a12aec4157fe68e01dc1d608627a4734.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img class="boxes" typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_a12aec4157fe68e01dc1d608627a4734.jpg" alt="" title=""></a>
        <a href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_b6f3583a3718298533f4f1f1ae58b690.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img class="boxes" typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_b6f3583a3718298533f4f1f1ae58b690.jpg" alt="" title=""></a>
        <a     href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_db4093c431282a16ff3e80767b3f8ecc.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img class="boxes" typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_db4093c431282a16ff3e80767b3f8ecc.jpg" alt="" title=""></a>
        <a    href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_df2173694b2e1cc56e443a4103f02ede.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img class="boxes" typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_df2173694b2e1cc56e443a4103f02ede.jpg" alt="" title=""></a>
</div>
于 2013-03-25T14:51:43.747 に答える