网格与正方形和垂直/水平矩形

Question

客户希望像这样的网格：

它包括正方形以及水平和垂直矩形。

我想知道是否有办法实现这一点，而不是在每个断点都采用一大堆绝对位置......

如果没有，我愿意说单位5不能垂直，所以整个布局可以由两行组成。但我很好奇。

谢谢！

Answer 1

如果响应性不是问题，您可以使用<table> s <tr>和<td> s轻松完成。

这样的事情：

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>6</td>
        </tr>
      </table>
    </td>
    <td colspan="2">
      <table>
        <tr>
          <td>
            <table>
              <tr>
                <td>2</td>
                <td>3</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <table>
              <tr>
                <td>
                  <table>
                    <tr>
                      <td colspan="2">4</td>
                    </tr>
                    <tr>
                      <td>7</td>
                      <td>8</td>
                    </tr>
                  </table>
                </td>
                <td>5</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
  </tr>
</table>

我没有测试过它我不是100％肯定会这样做，但你应该玩这些标签。 此外，您必须向您的width="NUMBERpx"元素添加一些height="NUMBERpx"和<td>属性。还有一些其他的CSS样式，如填充边距等。

我希望这有助于你

Answer 2

所以我知道你应该先尝试自己做，但我需要那个甜蜜的声誉能够告诉你在评论中加上它给了我一个学习机会。 JSFiddle:我必须将5 div分成两部分并使用bootstrap。