html - Scroll div horizontally and fixed the height of div -
there 4 images in div, want images can scrolled in same row, images not drop down row, how can this?
<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>
you use word scroll in title , description. want carousel effect? sounds you're looking 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>
Comments
Post a Comment