html - How to make divs that automatically wrap to the next row -
i creating html voucher templates hotspot system , have need following.
i want print 2 vouchers side side , wrap the next row next 2 vouchers, catch system generating code not give me freedom assign different classes each voucher , css needs handle automatically. ideas on how this?
just set static height , width vouchers , display:inline-block. wrap based on size of relative container.
#container { display: block; width: 250px; position: relative; border: solid 1px green; } .voucher { display: inline-block; position: relative; width: 110px; height: 110px; margin: 3px; border: solid 1px red; } <html> <body> <div id="container"> <div class="voucher">hi</div> <div class="voucher">hi</div> <div class="voucher">hi</div> <div class="voucher">hi</div> <div class="voucher">hi</div> <div class="voucher">hi</div> <div class="voucher">hi</div> <div class="voucher">hi</div> <div class="voucher">hi</div> <div class="voucher">hi</div> </div> </body> </html>
Comments
Post a Comment