要在不使用flexbox的情况下对齐项目的顶部和底部,可以使用以下方法:
方法1:使用display: table和vertical-align属性
HTML代码:
项目1
项目2
项目3
CSS代码:
.container {
display: table;
width: 100%;
}
.item {
display: table-row;
}
.item:nth-child(odd) {
background-color: #f2f2f2;
}
.item:nth-child(even) {
background-color: #ccc;
}
.item:before {
content: "";
display: table-cell;
width: 1px;
height: 100%;
vertical-align: middle;
}
.item .content {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
方法2:使用position属性和transform属性
HTML代码:
项目1
项目2
项目3
CSS代码:
.container {
position: relative;
}
.item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 33.33%;
background-color: #f2f2f2;
padding: 10px;
}
.item:nth-child(2) {
top: 33.33%;
background-color: #ccc;
}
.item:nth-child(3) {
top: 66.66%;
background-color: #f2f2f2;
}
这两种方法都可以在不使用flexbox的情况下实现项目的顶部和底部对齐。选择哪种方法取决于具体的需求和布局。