如何在 HTML 中合并具有两个不同列大小的两行

问题描述 投票：0回答：1

我想将“文本”合并到“图片”下的另一列

Reference of the problem


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>grid</title>

        <style>
            body{
                margin: 0;
            }

            .container {
                width: 100vw;
                height: 100vh;
                font-family: 'Quicksand', sans-serif;
                font-weight: bold;
            
                display: grid;

                grid-template-columns: 0.5fr 1fr;
                grid-template-rows: 50px 1fr 1fr 100px;

                gap: 10px;
                padding: 10px;
                box-sizing: border-box;
            }

            .container div {
                border: 1px solid black;
            }
            .header {
                grid-column-start: 1;
                grid-column-end: 3;
            }
            .text {
                grid-row-start: 2;
                grid-row-end: 4;
                grid-column-start: 2;
                grid-column-end: 3;
            }
        
        </style>

    </head>
    <body>

        <div class="container">
            <div class="header">Header</div>
            <div class="pic">Picture</div>
            <div class="text">Text  </div>
        </div>

    
    </body>
</html>

这应该是输出：

Should be the output after the problem fixed

↑ 如果感到困惑，请使用上面的链接作为参考

+------------------------------------------------ ---------+
|标题 |
| |
+--------------------+---------------------------------------- --------+
|图片|文字|
| | |
| | |
| | |
| | |
+--------------------+ |
| |
| |
| |
| |
| |
+------------------------------------------------ --------+

html css grid
1个回答
0
投票

您可以针对使用 Flex 显示的页面视图尝试此操作。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <div class="header">Here is your header</div>
      <div style="display: flex">
        <div>
          <img
            src="https://img.freepik.com/free-vector/realistic-credit-card-design_23-2149126090.jpg"
          />
        </div>
        <div>
          Here is lot of contentHere is lot of contentHere is lot of contentHere
          is lot of contentHere is lot of contentHere is lot of contentHere is
          lot of contentHere is lot of contentHere is lot of contentHere is lot
          of contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of content
        </div>
      </div>
    </div>
    
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.