HTML CSS examples for CSS Widget:Table Row
Maintain column width in row set as "display: table"
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .row-flex {<!-- w ww .java2s .c o m--> display:table; width:100%; height:26%; } .one-third-flex.column { width:34.3334%; display:table-cell; text-align:center; vertical-align:middle; float:left; } .one-third-flex.column:last-child { margin-left:34.334%; } </style> </head> <body> <div class="row row-flex buttons-bottom row-one-half text-body"> <div class="one-third-flex column" style="background-color:red"> </div> <div class="one-third-flex column" style="background-color:green"> </div> <div class="one-third-flex column" style="background-color:yellow"> </div> <div class="one-third-flex column" style="background-color:pink"> </div> </div> </body> </html>