Question

我的HTML类似于以下示例：

<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>

我需要这样的布局：

块的高度可以不同。
如何在没有其他包装器的情况下使用flexbox进行此操作？

Answer 1

您可以使用表格。这很容易实现。

＆＃13;

<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>

＆＃13;

希望它会有所帮助。

Flexbox：带有rowspan的布局，没有包装器

1 个答案: