this question has answer here:
i have sample:
code html:
<div class="product-group"> <div class="product-wrapper"> <div class="product-img"> <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg" > </div> <div class="product-details"> <h3 class="product-name"> <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title=""better tie" father’s day gift bundle"> "better tie" father’s day gift bundle </a> </h3> <div class="product-description"> <p class="availability"> release date: 07/26/2016 </p> <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">view product</a> </div> </div> </div> <div class="product-wrapper"> <div class="product-img"> <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg" > </div> <div class="product-details"> <h3 class="product-name"> <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title=""better tie" father’s day gift bundle"> "better tie" father’s day gift <br> bundle"better tie" father’s day <br> gift bundle "better tie" <br>father’s day gift bundle "better tie" <br> </a> </h3> <div class="product-description"> <p class="availability"> release date: 07/26/2016 </p> <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">view product</a> </div> </div> </div> </div> code css:
.product-group{ display: inline-flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } .product-wrapper{ background:#f0f0f0; margin:35px 0; padding:8px 8px 10px 8px; } .product-name { margin:0; font-size:1em; font-weight:normal; } .product-wrapper .product-details p.availability { font-size: 12px; text-transform: capitalize;} plase view button "view product",it must in bottom always, regardless of content.
at time, buttons not aligned should. position bottom: 0
how can without using position: absolute?
thanks in advance!
you should able achieve want using flex. way, wrappers on same line same height, , product links line up. (use full page link on snippet below)
.product-group { display: inline-flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } .product-wrapper { background: #f0f0f0; margin: 35px 0; padding: 8px 8px 10px 8px; display: flex; /* make each wrapper flex*/ flex-direction: column; /* stack inner elements column */ } .product-name { margin: 0; font-size: 1em; font-weight: normal; } .product-wrapper .product-details p.availability { font-size: 12px; text-transform: capitalize; /* make take empty space , push link bottom */ flex-grow: 1; } .product-description, .product-details { /* make these flex , stretch fit parents remaining space */ flex-direction: column; display: flex; flex-grow: 1; }<div class="product-group"> <div class="product-wrapper"> <div class="product-img"> <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg"> </div> <div class="product-details"> <h3 class="product-name"><a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title=""better tie" father’s day gift bundle">"better tie" father’s day gift bundle</a></h3> <div class="product-description"> <p class="availability"> release date: 07/26/2016</p> <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">view product</a> </div> </div> </div> <div class="product-wrapper"> <div class="product-img"> <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg"> </div> <div class="product-details"> <h3 class="product-name"><a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title=""better tie" father’s day gift bundle">"better tie" father’s day gift <br> bundle"better tie" father’s day <br> gift bundle "better tie" <br>father’s day gift bundle "better tie" <br> </a></h3> <div class="product-description"> <p class="availability"> release date: 07/26/2016</p> <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">view product</a> </div> </div> </div> </div>
Comments
Post a Comment