.container1 {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: flex-start; /* 改为从起点开始排列，而不是分散 */  
  /* 可以考虑添加 max-width 以限制容器的最大宽度 */  
  max-width: 100%; /* 或者一个具体的像素值，确保不超过父元素的宽度 */  
  margin-right: -5px; /* 负外边距，用于抵消内边距造成的额外空间 */  


}  
  
.box {  
  flex: 0 0 calc(25% - 10px); /* 使用 calc 来计算宽度，减去两个内边距的值 */  
  margin-right: 10px; /* 右外边距，用于在元素之间创建间距 */  
  /* 其他样式保持不变 */  
  height: 232px;  
  overflow: hidden; /* auto超出容器的文字显示滚动条 overflow:hidden ;会隐藏超出容器的部分*/  
  margin-bottom: 2%; /* 行与行之间的间距 */  
  text-align: left;  
  background-color: #; /* 背景色，可根据需要修改 */  
  border: 1px solid #ccc; /* 边框，可根据需要修改 */  
  padding: 5px; /* 内边距，可根据需要修改 */ 
}  
  
.box1 {  
  background-color: #f0f0f0; /* 背景色，可根据需要修改 */  
  padding: 10px; /* 内边距，可根据需要修改 */  
}  

.box-image {  
  display: block;  
  margin: 0 auto;  
  max-width: 100%;  
  height: auto;  
}  
  
.box-text {  
  margin-top: 10px; /* 图片与文字之间的间距 */    
}


h3,h4 {  
  height: 30px; /* 设置<h3>元素的高度为40像素 */  
  line-height: 30px; /* 设置行高与高度一致，使文本垂直居中 */  
  overflow: hidden; /* 隐藏超出高度的内容 */  
  text-overflow: ellipsis; /* 如果内容溢出，则显示省略号 */  
  white-space: nowrap; /* 防止文本换行 */  
}
/* h4 {  
  min-height: 40px; /* 设置<h3>元素的最小高度为40像素 */  
} */ 
/* 最后一个 .box 元素不需要右外边距 */  
.box:last-child {  
  margin-right: 0;  
}