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

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -