要在不使用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的情况下实现项目的顶部和底部对齐。选择哪种方法取决于具体的需求和布局。