如何正确对齐布局中LI内文本与DIV容器内的图片

DevOps 小满

2026-10-3

问题修复方案

核心问题原因

通配符*全局设置width: 890px，强制所有元素宽度为890px，直接破坏子元素的排列逻辑
两列布局属性使用错误：column-span: 2是多列布局下子元素跨列的属性，不能给父容器设置实现两列效果
子元素宽度不匹配：.price设置宽度550px，远大于父级li的400px宽度，导致文本溢出截断
缺少文本换行规则，长文本无法自动折行
浮动布局缺少配套规则，.descript1只设置左浮动，没有定义宽度和清除浮动逻辑，导致排列错位

修复后代码

CSS部分

a {
  text-decoration: none;
}
header{
  margin: 0; padding: 2em 5em 4em; color: #efefef;
  overflow:hidden;
  position: relative;
}
header::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height: 100%;
  width:100%;
  transform: skewY(-3deg);
  background: red;
  transform-origin: bottom left;
  z-index: -1;
}
div.content {
  font-family: sans-serif;
  font-size: 16px;
  width: 460px;
}
ul.vehicleinfo {
  display: flex;
  flex-wrap: wrap;
  width: 760px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  justify-content: space-between;
}
ul.vehicleinfo li { 
  font-family: sans-serif;
  font-size: 88%;
  color: #333;
  background-color: yellow;
  width: 48%;
  margin: 0 0 20px 0;
  word-wrap: break-word;
  word-break: break-all;
}
ul.vehicleinfo li * {
  display: block;
}
ul.vehicleinfo li h3 {
  font-size: 1.2em;
  margin: 0;
  padding: 8px;
}
div.autocontent {
  width: 760px;
  margin: 0 auto;
}
.price {
  text-align: center;
}
.contentbox1 {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.autoimg img {
  width: 340px;
  display: block;
}
.descript1 {
  font-size: 14px;
  flex: 1;
}