Question

我正在寻找解决这种情况的最佳方法：

给出一个4格的网格。我希望顶行是固定高度，右列是固定宽度。在调整屏幕大小时，左列的宽度和底行的高度将自动调整大小。

（这是最简单的部分..只需将HTML TABLE中的“东北”单元格设置为固定大小，并将TABLE的高度和宽度设置为100％）

现在是棘手的部分。我希望东南，西北和东北的细胞能够旋转。由于东北电池是一个固定大小的方形，这很容易做，只需旋转它。然而，根据窗户的高度和宽度，东南和西北的单元格的大小是动态的。

以下是一个非常简单的情况示例 - 我将仅针对此示例旋转东南角：

<html>
<head>
    <style>
        #mainGrid {
            width: 100%;
            height: 100%;
        }
        #nw {
            background-color:blue;
        }
        #ne {
            height: 100px;
            width: 100px;
            transform:rotate(180deg);
            background-color:red;
        }
        #sw {   background-color:yellow; }
        #se {
            transform:rotate(-90deg);
            background-color:green;
        }
    </style>
</head>

<body>
    <table id="mainGrid">
    <tr>
        <td id="nw">Northwest</td>
        <td id="ne">Northeast</td>

    </tr>
    <tr>
        <td id="sw">Southwest</td>
        <td id="se">Southeast</td>
    </tr>
    </table>
</body>
</html>

结果是：

Result of running the code above

在调整屏幕大小时，让TABLE（或DIV或UL网格）表现得很好的最简单方法是什么？就像旋转之前一样？换句话说，东南小区的大小和位置与原来的大小和位置相同，但内容将会旋转。

这可以使用纯HTML5 / CSS3而不是javascript吗？如果没有，那么我可以使用的最简单的javascript - 没有任何库 - 可以解决这个问题吗？

Answer 1

您可以将内容包装在div或其他内容中并旋转它而不是td本身：

<table id="mainGrid">
<tr>
    <td id="nw">Northwest</td>
    <td id="ne">Northeast</td>

</tr>
<tr>
    <td id="sw">Southwest</td>
    <td id="se"><div class="rotated">Southeast</div></td>
</tr>
</table>

CSS：

#mainGrid {
     width: 100%;
    height: 100%;
}
 #nw {
     background-color:blue;
 }
 #ne {
     height: 100px;
     width: 100px;
     transform:rotate(180deg);
     background-color:red;
  }
  #sw {   background-color:yellow; }
 #se {
     background-color:green;
  }
  .rotated {
      transform:rotate(-90deg);
 }

小提琴： https://jsfiddle.net/2hagsgs2/

如何进行CSS3转换：自动调整旋转大小

1 个答案: