如何将卡片div集中在网格上

发布于 2025-01-23 14:11:56 字数 1825 浏览 3 评论 0 原文

我正在尝试创建一个HTML布局，该布局由两个列组成。在右列中，我想显示一个符合卡，在其旁边的每一侧是人字形图标。我正在使用SCSS来设置我的布局，并且有些关闭：卡片容器似乎并没有集中，实际上似乎它似乎不适合其容器内。

我一直在努力弄清楚为什么会发生这种情况，而无法提出解决方案。感谢任何帮助！

HTML：

<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">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="./test.scss" rel="stylesheet">
    <title>Document</title>
</head>
<body> 
    <div class="container">
        <div class="left-column"></div>
        <div class="right-column">
          <span class="material-icons chevron-left">chevron_left</span>
          <div class="card"></div>
          <span class="material-icons chevron-right">chevron_right</span>
        </div>
    </div>
</body>

SCSS：

.container {
    display: grid;
    grid-template-columns: 35fr 65fr;
  
    .right-column {
      display: grid;
      grid-template-columns: 15fr 70fr 15fr;
      height: 95vh;
  
      span {
        height: 50px;
        margin: 20px;
        font-size: 50px;
        cursor: default;
        display: flex;
        align-items: center;
  
        &:hover {
          font-size: 60px;
        }
  
        &.chevron-left {
          justify-content: center;
        }
  
        &.chevron-right {
          justify-content: center;
        }
      }

      .card {
        width: 100%;
        height: 100%;
      
        margin: 50px;
        border: 3px solid black;
        border-radius: 8px;
        box-sizing: border-box;
        overflow: auto;
    }
  }
}

原文

I am trying to create an HTML Layout, which consists of two columns. In the right column I want to display a card-container and on each side next to it a chevron icon. I am using SCSS to style my layout and something is off: The card-container does not seem to be centered, actually it seems as if it doesn't fit inside its container.

I have been struggling to figure out why this is happenning and just couldn't come up with a solution. I would appreciate any help!

HTML:

<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">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="./test.scss" rel="stylesheet">
    <title>Document</title>
</head>
<body> 
    <div class="container">
        <div class="left-column"></div>
        <div class="right-column">
          <span class="material-icons chevron-left">chevron_left</span>
          <div class="card"></div>
          <span class="material-icons chevron-right">chevron_right</span>
        </div>
    </div>
</body>

SCSS:

.container {
    display: grid;
    grid-template-columns: 35fr 65fr;
  
    .right-column {
      display: grid;
      grid-template-columns: 15fr 70fr 15fr;
      height: 95vh;
  
      span {
        height: 50px;
        margin: 20px;
        font-size: 50px;
        cursor: default;
        display: flex;
        align-items: center;
  
        &:hover {
          font-size: 60px;
        }
  
        &.chevron-left {
          justify-content: center;
        }
  
        &.chevron-right {
          justify-content: center;
        }
      }

      .card {
        width: 100%;
        height: 100%;
      
        margin: 50px;
        border: 3px solid black;
        border-radius: 8px;
        box-sizing: border-box;
        overflow: auto;
    }
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苦妄 2025-01-30 14:11:56

首先，原因，您的卡在您的右列的盒子外面，是因为它的高度为100％的父级，而且它具有边距，从而将其向外推出并溢出其列，应该是包含在内。为防止它，请使用 calc（）函数，例如：高度：calc（100％-100px） and width：calc（100％-100px）< /代码>考虑保证金：50px 表示每个轴总计100px。其次，要垂直将所有内容集中在右列中，您需要在上设置 align-items 。第三，要水平中心您的卡，请在上设置 josify-self：center .card

更新：以来，您的评论指出了您只需要顶部和底部边距，您就应该设置宽度：卡上的100％，一切都会按预期工作 - 您也无需水平将卡中心居中，因此无需正当：卡中的中心在您的卡上。我在下面编辑了代码片段以说明这一点。

.container {
  display: grid;
  grid-template-columns: 35fr 65fr;
}
.right-column {
  display: grid;
  grid-template-columns: 15fr 70fr 15fr;
  height: 95vh;
  align-items: center;
}
.right-column span {
  height: 50px;
  margin: 20px;
  font-size: 50px;
  cursor: default;
  display: flex;
  align-items: center;
}
.right-column:hover {
  font-size: 60px;
}

.right-column .chevron-left {
  justify-content: center;
}

.right-column .chevron-right {
  justify-content: center;
}

.right-column .card {
  width: 100%;
  height: calc(100% - 100px);

  border: 3px solid black;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: auto;
}

<!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" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link href="test.css" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="left-column"></div>
      <div class="right-column">
        <span class="material-icons chevron-left">chevron_left</span>
        <div class="card"></div>
        <span class="material-icons chevron-right">chevron_right</span>
      </div>
    </div>
  </body>
</html>

First of all, the reason, your card is outside your the box of your right column, is because it has a height of 100% of its parent PLUS it has a margin, thereby pushing it outwards and overflowing its column it is supposed to be contained within. To prevent it, use calc() function, for example: height: calc(100%- 100px) and width: calc(100% - 100px) considering margin: 50px means a total of 100px in each axis.
Second, to center everything vertically inside your right column, you need to set align-items: center on your .right-column.
Third, to center your card horizontally as well, set justify-self: center on your .card

Update: Since, your comment pointed out that you only need top and bottom margins, you should set width: 100% on your card and everything will work as expected - also you would not need to center your card horizontally then, thereby no need for justify-self: center on your card. I edited the code snippet below to account for this.

.container {
  display: grid;
  grid-template-columns: 35fr 65fr;
}
.right-column {
  display: grid;
  grid-template-columns: 15fr 70fr 15fr;
  height: 95vh;
  align-items: center;
}
.right-column span {
  height: 50px;
  margin: 20px;
  font-size: 50px;
  cursor: default;
  display: flex;
  align-items: center;
}
.right-column:hover {
  font-size: 60px;
}

.right-column .chevron-left {
  justify-content: center;
}

.right-column .chevron-right {
  justify-content: center;
}

.right-column .card {
  width: 100%;
  height: calc(100% - 100px);

  border: 3px solid black;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: auto;
}

<!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" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link href="test.css" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="left-column"></div>
      <div class="right-column">
        <span class="material-icons chevron-left">chevron_left</span>
        <div class="card"></div>
        <span class="material-icons chevron-right">chevron_right</span>
      </div>
    </div>
  </body>
</html>

回复收藏 0 原文

~没有更多了~