如何正确对齐 CSS 网格答案

【问题标题】：How to correctly align css grids如何正确对齐 CSS 网格
【发布时间】：2022-06-20 08:26:03
【问题描述】：

我想在我的页面上有一个 h4 的标题，一个 h5 的子标题，然后 3 个 div 以这张图片的方式排列：

我有这个 html 代码：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
  <h4>Title 1</h4>
  <h5>SubTitle 1</h5>
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
</div>

</body>
</html>

但是我遇到的问题是我的 div 都向右移动了，而且我的标题没有像上一张图片那样对齐

有人有想法吗？

是否可以结合 bootstrap 4 来正确对齐我的标题和 div，或者仅使用我的网格可以正确对齐

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 css-grid

【解决方案1】：

您可以简单地通过使用而不是使用 flex 来实现您想要的结果 “网格区域”和“网格区域模板”。你可以看下面的代码来理解。您还希望，如果有人单击“2”，则“ul”会变得可见。因此，现在 CSS 中有点击选择器，但我使用了悬停并相应地定位元素。您可以更改和使用代码以获得所需的设计。

<!DOCTYPE html>
<html>
<head>
<style>

    /* NAME THE AREAS , CAN BE NAMED ANYTHING */
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }

.grid-container {
  display: grid;
  
  /* describing which area item will take how much space */
    grid-template-areas:
        'item1 item1 item1 item1 item1 item1'
        'item2 item2 item2 item2 item2 item2'
        'item3 item3 item3 item3 item3 item3'
        'item4 item4 item4 item5 item5 item5';
  column-gap: 50px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  margin-bottom: 35px;
}
.item4{
    position: relative;
}
.item4 .list{
    display: none;
    position: absolute;
    right: 250px;
    top: 0;
}

.item4 li{
    list-style: none;
    font-size: 20px;
    border: 2px solid black;
    padding: 3px 20px;
    margin-bottom: 2px;
    background-color: bisque;
}
.item4 li a{
    text-decoration: none;
}
.item4:hover > .list{
    display: block;
}
</style>
</head>
<body>

<div class="grid-container">
  <h4 class="item1">Title 1</h4>
  <h5 class="item2">SubTitle 1</h5>
  <div class="grid-item item3">1</div>
  <div class="grid-item item4">2
      <ul class="list">
          <li><a href="#"></a>Hello</li>
          <li><a href="#"></a>Hiii</li>
      </ul>
  </div>
  <div class="grid-item item5">3</div>  
</div>
</body>
</html>

【讨论】：

【解决方案2】：

您可以尝试调整第 2 项和第 3 项，然后您需要从网格 div 中删除标题和副标题，以便将它们分开。从您的代码中查看下面的示例并告诉我。

$(".item2").click(function(){
  $(".popup").toggle();
});

.grid-container {
  display: grid;
  column-gap: 50px;
  grid-template-columns:auto;
  background-color: #2196F3;
  padding: 10px;
  grid-gap:10px;
  max-width:600px;

}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  cursor:pointer;
  font-weight:bold;
}

.grid-item2 {
  display:flex;
  justify-content:space-evenly;
  width:100%;
  grid-gap:10px;
}

.grid-item2 > div {width:100%;}

.popup {
  height: auto;
  max-width: 250px;
  border: 1px solid gray;
  border-radius: 20px;
  display: none;
  position: relative;
  align-items: center;
  text-align: center;
  z-index: 1;
  margin-top:-60px;
  background-color:white;

 }
 
 .popup img {
  height:50px;
  width:50px;
  object-fit:cover;
  
  }

.fruit-mango {
    display:flex;
    align-items:center;
    justify-content:center;
    grid-gap:20px;
    }

<!DOCTYPE html>
<html>
<head>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>

<div>
  <h4>Title 1</h4>
  <h5>SubTitle 1</h5>
  <div class="grid-container">
  <div class="grid-item">1</div>
      <div class="grid-item2">
        <div class="grid-item item2">2</div>  
        <div class="grid-item">3</div>   
      </div>
</div>
<div class="popup" >
      <div class="fruit-mango">
        <img src="https://photos2.fotosearch.com/bthumb/CSP/CSP994/mango-clip-art__k16208308.jpg">
        <span >MANGO FR</span><br>
        </div>
        <hr>
        <div class="fruit-mango">
        <img src="https://photos2.fotosearch.com/bthumb/CSP/CSP994/mango-clip-art__k16208308.jpg">
        <span class="fruit">MANGO EN</span>
      </div>
</div>

</body>
</html>

【讨论】：

嗨@Crystal，非常感谢，但我现在想要当我点击
2
时，我有一个包含2 ul li 内容的弹出框( mangoe 1, mango 2) 当我点击
3
我有 ul li 内容 (mango 1, mango 2, mango 3) 和之后
2
，我有
4
。请问如何添加呢
你的意思是点击弹出窗口？是图片还是只是链接？在您的问题或插图上放一个示例，以便我可以帮助您解决问题。
嗨@Crystal 是的，我希望在点击时弹出一个窗口，我更新了图片以激发您的灵感
@ln3106 找不到你说的照片..
嗨@Crystal，我添加了它，你现在可以看到了。