如何將一個螢屏分割成若干個大小相等的盒子，并全部朝外？ -有解無憂

我有一個移動網站，其目的是放在桌子的中心，盒子的數量與桌子周圍的玩家數量相等。上面有一系列的分數，這些分數指的是每個玩家的分數，并面向該玩家。

我想我可能必須使用網格來布置這些。我的問題是，是否有一個更簡單的內置方法？我正在努力結合網格和transform: rotate(90deg)。

沒有旋轉:

有旋轉：

這里有一個代碼片段：

。

span class="hljs-selector-tag">body { 
    font-family: sego-ui_normal,Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif;
    display: grid;
    grid-template-areas: 
    "one two three six"/span>
    "一二三六"/span>
    "一四五六" "一四五六"
    "一四五六"。
    grid-template-rows: 25% 25% 25%。
    grid-template-columns: 25% 25% 25% 25%;
    grid-gap: 5px;
  height: 100vh;
  margin: 10px;  
}

one {
  background: #707070;
  grid-area: one;
  transform: 旋轉（90deg）。
}

二 {
  background: #707070;
  grid-area: two;
  transform: 旋轉（180deg）。
}

三 {
  background: #707070;
  grid-area: three;
  transform: 旋轉（180deg）。
}

四 {
  background: #707070;
  grid-area: four;
}

五 {
  background: #707070;
  grid-area: five;
}

六 {
  background: #707070;
  grid-area: 六。
  transform: rotate(-90deg)。
}

<one>/span>20</one>
<two>/span>20</two>/span>
<three>/span>20</three>
<four>20</four>
<五>20</五>/span>
<six>20</six>

uj5u.com熱心網友回復：

我認為你會發現旋轉divs的內容比旋轉divs本身更容易。只需使用div進行布局即可。

你可以利用writing-mode和/或必要的轉換。

。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: 繼承。
}

body {
  font-family: segoe-ui_normal, Segoe UI, Segoe, Segoe WP, Helvetica Neue, Helvetica, sans-serif;
  display: grid;
  grid-template-areas: "one two three six" "one two three six" "one four five six" "one four five six"。
  grid-template-rows: repeat(4, 1fr) 。
  grid-template-rows: repeat（4, 1fr）。
  grid-gap: 5px;
  height: 100vh;
  padding: 5px;
}

body div {
  outline: 1px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
  字體大小: 2rem;
}

.one {
  grid-area: one;
  background: 綠色。
}

.one p {
  寫作模式: vertical-rl;
}

.wo {
  grid-area: two;
}

.three {
  grid-area: three;
}

.two p,
.three p {
  transform: rotate(180deg)。
}

.four {
  grid-area: four;
}

.five {
  grid-area: five;
}

.six {
  background: orange;
  grid-area: six;
  寫作模式: vertical-rl;
}

.six p {
  transform: rotate(-180deg) 。
}

<div class="one"> /span>
  <p>20</p>/span>
</div>/span>
<div class="two"> 
  <p>20</p>/span>
</div>/span>
<div class="three"> 
  <p>20</p>/span>
</div>/span>
<div class="four"> 
  <p>20</p>/span>
</div>/span>
<div class="five">/span>
  <p>20</p>/span>
</div>/span>
<div class="six">/span>
  <p>20</p>/span>
</div>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/331808.html

標籤：

上一篇：為什么程式總是回傳$everything_Ok=true

下一篇：Jquery查找一個td的輸入型別（需要支持文本、日期、數字和選擇）。