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:

enter image description here

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

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -