html - Flexbox: Layout with rowspan without wrappers -
my html similar following example:
<div class="wrapper"> <div class="wrapper_item">1</div> <div class="wrapper_item">2</div> <div class="wrapper_item">3</div> <div class="wrapper_item">4</div> <div class="wrapper_item">5</div> <div class="wrapper_item">6</div> <div class="wrapper_item">7</div> </div>
and need layout this:
the height of blocks can different.
how can flexbox without other wrappers?
you can use tables. easy implement.
<html> <head> <style> table{ width:100px; height:100px; border:solid 3px black; border-collapse: collapse; } td{ background:grey; border:solid 3px black; padding:0px; } </style> </head> <body> <table> <tr> <td rowspan="2" colspan="2">1</td> <td>2</td> <td>3</td> </td> <tr> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html>
hope help.
Comments
Post a Comment