返回

CSS/html为什么我的内联div处于不同的高度?(新手)

发布时间:2022-04-20 04:53:09 329
# vue.js

我在html页面上使用网格容器;在网格中两个相邻的div中,我有一些小div。我希望这些小div显示在相同的高度,以便它们在整个页面上对齐。我想我给了它们相同的相关属性,但它们的高度略有不同,行距也不同。有人能告诉我为什么会发生这种情况,以及如何补救吗。非常感谢。

我在看我的Chrome,我的信息非常相关。

我的高低不平的积木图像:高低不平的div图像

相关代码:容器在CSS中定义如下:

.container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 4fr 1fr;
  height: 400px;
  background-color: lightgreen;
}

出现问题的容器的两列是第3列和第4列(2fr和4fr列)。这些div的定义如下:

 .wordDisplay {
  padding-top: 100px;
  text-align: center;
}

.display {
  padding-top: 100px;
}

我想在同一高度出现的蓝色小盒子div是:

.a {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding-top: 20px;
  margin: 1%;
  border: 1px solid blue;
  background-color: lightgreen;
  font-size: 20px;
  text-align: center;
}

.a:hover {
  background-color: yellow !important;
}

.b {
  display: inline-block;
  width: 150px;
  height: 50px;
  padding-top: 20px;
  margin: 1%;
  border: 1px solid blue;
  background-color: lightgreen;
  font-size: 20px;
  text-align: center;
}

.b:hover {
  background-color: yellow;
}
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像