Question

我想在div的角落有4个段落，在div的中心有1个段落，我该怎么做？

Answer 1

我希望我理解你是对的。我为您提供了一个小例子：

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
        'first  .     second'
        '.      third .     '
        'fourth .     fifth';
        width: 500px;
        height: 500px;
        border: 1px solid red;
      }
      
      .container > p {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
      }
      
      .first {
        grid-area: first;
      }
      
      .second {
        grid-area: second;
      }
      
      .third {
        grid-area: third;
      }
      
      .fourth {
        grid-area: fourth;
      }
      
      .fifth {
        grid-area: fifth;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p class="first">1</p>
      <p class="second">2</p>
      <p class="third">3</p>
      <p class="fourth">4</p>
      <p class="fifth">5</p>
    </div>

  </body>

</html>

https://plnkr.co/edit/IoR8muSmBLtFZIXLOvPe?p=preview

如何对齐每个段落的4个段落和居中对齐1个段落

1 个答案: