如何顯示 2 x 2 網格，其中第一列中的 div 1 和 div 2 彼此重疊，第二列中的 div 3 生成兩行

Question

以下代碼


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TITLE</title>
        <style>

        .a-block {
          background-color: #000066;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(2, 1fr);
          padding: 10px;
          gap:10px;
        }
        .a-block > div {
          background-color: #FF0000;
          border: 1px solid rgba(255, 255, 255, 0.8);
          padding: 50px;
          gap: 10px;
         }
        .c_title {
          display:grid;
          grid-area: 1 / 1 / 2 / 2
          font-size: 2em;
          text-align: left;
          background-color: #FF0000;
          gap: 10px;
        }
        .c_body {
         display:grid;
          grid-area: 2 / 1 / 3 / 2
          font-size: 1.5em;
          text-align: justify;
          font-size: calc(1.5em + (1vw - 0.5em)); /* adapt font-size based on screen size */
          min-font-size: 0.8em; /* minimum font-size */
          background-color: #0000FF;
          gap: 10px;
        }
        .p_img  {
         display:grid;
         grid-area: 1 / 2 / 3 / 3
         background-color: #FF0000;
         gap: 10px;
        }
        .p_img  > img {
          object-fit: cover;
          width: 100%;
          max-height: 100%;
        }


        }
    </style>
    </head>
    <body>


            <div class="a-block" >
                <div class="c_title">title</div>
                <div class="c_body">
                    Lorem ipsum dolor sit
                </div>
                <div class="p_img"  >
                        <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png"  >
                </div>
            </div>



        <p></p>

    </body>
</html>

產生這個結果

瀏覽器渲染結果

我希望在第一列中相互堆疊的兩個 div 都在第一行。 我希望在第二列中生成兩行的圖像是第二行和第一行

查看 Chrome 的檢查器，我可以看到我的網格布局信息以某種方式被忽略了，但我沒有找到解決方法

Chrome 檢查器視圖

我嘗試了許多關於網格布局和屬性的變體，但它一直被忽略。

Answer 1

 .a-block { background-color: #000066; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); padding: 10px; gap:10px; }.a-block > div { background-color: #FF0000; border: 1px solid rgba(255, 255, 255, 0.8); padding: 50px; gap: 10px; }.c_title { font-size: 2em; text-align: left; background-color: #FF0000; gap: 10px; }.c_body { font-size: 1.5em; text-align: justify; font-size: calc(1.5em + (1vw - 0.5em)); /* adapt font-size based on screen size */ min-font-size: 0.8em; /* minimum font-size */ background-color: #0000FF; gap: 10px; }.p_img { grid-area: 1 / 2 / span 2 / 2; background-color: #FF0000; gap: 10px; }.p_img > img { object-fit: cover; width: 100%; max-height: 100%; }

 <div class="a-block" > <div class="c_title">title</div> <div class="c_body"> Lorem ipsum dolor sit </div> <div class="p_img" > <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" > </div> </div>

如何顯示 2 x 2 網格，其中第一列中的 div 1 和 div 2 彼此重疊，第二列中的 div 3 生成兩行

問題描述

1 個解決方案

解決方案1
0 2023-01-22 18:01:36

如何顯示 2 x 2 網格，其中第一列中的 div 1 和 div 2 彼此重疊，第二列中的 div 3 生成兩行

問題描述

1 個解決方案

解決方案1 0 2023-01-22 18:01:36

解決方案1
0 2023-01-22 18:01:36