Question

我很难创建响应式CSS网格。例如，这就是我想在桌面上输出的内容：

________________________________________________________________________
| Stat 1 | Stat 2 | Stat 3 | Stat 4 | Stat 5 | Stat 6 | Stat 7 | Stat 8 |
|-----------------------------------------------------------------------|
| Info 1 | Info 2 | info 3 | info 4 | Info 5 | Info 6 | Info 7 | Info 8 |
-------------------------------------------------------------------------

但这是我想在手机上输出的内容：

_____________________________________
| Stat 1 | Stat 2 | Stat 3 | Stat 4 |
|------------------------------------
| Info 1 | Info 2 | info 3 | info 4 |
-------------------------------------
| Stat 5 | Stat 6 | Stat 7 | Stat 8 |
|-----------------------------------|
| Info 5 | Info 6 | Info 7 | Info 8 |
 ------------------------------------

我有以下HTML和CSS在桌面上正确输出，但它不能在手机上正确输出。

HTML

<div id="statcontainer">
    <div class="stat-header row clearfix">
            <div class="stat-value">
                Stat 1
            </div>

            <div class="stat-value">
                Stat 2
            </div>

            <div class="stat-value">
                Stat 3
            </div>

            <div class="stat-value">
                Stat 4
            </div>

            <div class="stat-value">
                Stat 5
            </div>

            <div class="stat-value">
                Stat 6
            </div>

            <div class="stat-value">
                Stat 7
            </div>

            <div class="stat-value">
                Stat 8
            </div>
    </div>

    <div class="stat-content row clearfix">
            <div class="stat-value">
                info 1
            </div>

            <div class="stat-value">
                info 2
            </div>

            <div class="stat-value">
                info 3
            </div>

            <div class="stat-value">
                info 4
            </div>

            <div class="stat-value">
                info 5
            </div>

            <div class="stat-value">
                info 6
            </div>

            <div class="stat-value">
                info 7
            </div>

            <div class="stat-value">
                info 8
            </div>
    </div>
</div>

CSS

.statcontainer {
    display: table;
}

.stat-header {
    display: table-row;
    font-weight: bold;
    text-align: center;
}

.stat-content {
    display: table-row;
}

.stat-value {
    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
}

Answer 1

首先，当您的用例看起来应该使用300px时，为什么要使用div？当你需要这种显示时，HTML已经有一个表元素可以使用了。

其次，您如何在不使用媒体查询的情况下获得响应式布局？媒体查询将使您的设计响应。您应该始终确保首先将初始布局设置为移动设备，并使用媒体查询来显示桌面视图。这将是您尝试实现的简化版本：

https://jsfiddle.net/n4xoj2ju/

<强> HTML：

<table>

<强> CSS：

<table>
  <tr>
    <td>
      Stat 1
    </td>
    <td>
      Stat 2
    </td>
    <td>
      Stat 3
    </td>
    <td>
      Stat 4
    </td>
  </tr>
  <tr>
    <td>
      Info 1
    </td>
    <td>
      Info 2
    </td>
    <td>
      Info 3
    </td>
    <td>
      Info 4
    </td>
  </tr>  
</table><table>
  <tr>
    <td>
      Stat 5
    </td>
    <td>
      Stat 6
    </td>
    <td>
      Stat 7
    </td>
    <td>
      Stat 8
    </td>
  </tr>
  <tr>
    <td>
      Info 5
    </td>
    <td>
      Info 6
    </td>
    <td>
      Info 7
    </td>
    <td>
      Info 8
    </td>
  </tr>  
</table>

响应式4x4 CSS网格

1 个答案: