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

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -