【CSS】三个DIV在同一行平分宽度的五种实现方法

/* 方法1: 使用display: inline-block和text-align */
.container {
  text-align: justify;
  overflow: hidden; /* 清除inline-block元素之间的额外空白 */
}
.container div {
  display: inline-block;
  width: 33.33%; /* 每个div占总宽度的33.33% */
  box-sizing: border-box; /* 包括padding和border在内的总宽度 */
}
 
/* 方法2: 使用flexbox */
.container {
  display: flex;
}
.container div {
  flex: 1; /* 平分剩余空间 */
}
 
/* 方法3: 使用grid */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每列占用1/3的空间 */
}
 
/* 方法4: 使用float和calc */
.container div {
  float: left;
  width: calc(100% / 3); /* 每个div占总宽度的100% / 3 */
}
 
/* 方法5: 使用display: table-cell */
.container {
  display: table-row;
}
.container div {
  display: table-cell;
  width: 33.33%; /* 每个div占总宽度的33.33% */
  box-sizing: border-box; /* 包括padding和border在内的总宽度 */
}

以上代码提供了五种不同的方法来实现三个div在同一行平分宽度。每种方法都有各自的应用场景和优缺点，开发者可以根据具体情况选择合适的方法。