问题描述
在一个行内元素中,如果包含了两个行内块元素,每个行内块元素又包含了一个网格容器,并且这两个网格容器内的网格项目垂直对齐属性不一致
,可能会导致盒子错位
。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body>.son {
display: inline-block;
}
.container1 {
width: 400px;
height: 400px;
margin: 0 auto;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
background-color: #4dec6d;
/* ** 垂直顶端对齐 水平居中 ** */
place-content: start center;
/* ** ** ** ** */
}
.container2 {
width: 400px;
height: 400px;
margin: 0 auto;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
background-color: #4dec6d;
/* ** 垂直底端对齐 水平居中** */
place-content: end center;
/* ** ** ** ** */
}
.item {
font-size: 25px;
text-align: center;
border: 1px solid black;
}
.item-1 {
width: 50px;
height: 50px;
background-color: #ef342a;
}
.item-2 {
width: 50px;
height: 50px;
background-color: #f68f26;
}
.item-3 {
width: 50px;
height: 50px;
background-color: #4ba946;
}
.item-4 {
width: 50px;
height: 50px;
background-color: #0376c2;
}
.item-5 {
width: 50px;
height: 50px;
background-color: #c077af;
}
.item-6 {
width: 50px;
height: 50px;
background-color: #f8d29d;
}
.item-7 {
width: 50px;
height: 50px;
background-color: #b5a87f;
}
.item-8 {
width: 50px;
height: 50px;
background-color: #d0e4a9;
}
.item-9 {
width: 50px;
height: 50px;
background-color: #4dc7ec;
}
</style>
</head>
<body>
<div class="son">
<div class="text">
<h2>垂直对齐1</h2>
</div>
<div class="container1">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
</div>
<div class="son">
<div class="text">
<h2>垂直对齐2</h2>
</div>
<div class="container2">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
</div>
</body>
</html>
运行效果:
原因分析:
这是因为行内元素默认是按照文本流排列
的,而网格容器内的网格项目是按照网格布局排列
的。当两个网格容器内的网格项目对齐垂直对齐属性不一致
时,它们在行内元素中的布局方式会不一样,从而导致盒子错位。
解决方案:
方案一:
在
body>.son {}
内加入overflow
属性
如下:
body>.son {
display: inline-block;
/* overflow: hidden;*/
/* overflow: auto;*/
}
方案二:
将类选择器(
.container1 {} 与 .container2 {}
)内属性place-content:
的垂直对齐方式改为一致
例如:把.container1 { place-content: start center; }
内的垂直顶端对齐
改为与.container2 {}
一致的垂直居中对齐
.container1 {
width: 400px;
height: 400px;
margin: 0 auto;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
background-color: #4dec6d;
/* ** 垂直顶端对齐 水平居中 ** */
place-content: center center;
/* ** ** ** ** */
}
最终效果: