汽车经销商平台CSS模板图片文本不对齐、div不自适应问题求助

问题根源 #

• 当前使用浮动布局时，父容器.mc-info没有清除浮动，内部浮动元素脱离文档流，导致父容器高度塌陷，无法被内容撑开，出现溢出、布局错乱问题
• 右侧文本容器.description未设置固定宽度，父容器总宽度固定为800px的情况下，文本宽度超过剩余可用空间时就会出现错位
• 外层.content容器宽度为750px，小于内部.mc-info的800px宽度，也会导致水平溢出

方案一：不更换布局，仅优化现有float代码 #

无需改用flex/grid，仅做以下调整即可修复问题，同时保留你要求的带边框div和.mc-info宽度设置：

1. 给.mc-info添加清除浮动规则，解决高度塌陷
2. 给.description设置适配的宽度，保证两列不会错位
3. 可选：给.mc-info添加box-sizing: border-box，让边框宽度包含在你设置的800px总宽度内，避免实际宽度超出设定值

修改后的CSS代码如下：

.header {
    background-color: #333;
    color: #FFF;
    padding: 30px;
}
/* 若需.mc-info不溢出外层，可把.content宽度调整为≥800px */
.content {
    width: 800px;
}
.mc-info {
    height: auto;
    border: 2px solid;
    width: 800px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden; /* 清除浮动，解决高度塌陷 */
    box-sizing: border-box; /* 边框计入800px总宽度 */
}
.mc-info-image {
    width: 240px;
}
.mc-info-image img {
    margin-right: 29px;
    height: 340px;
    float: left;
}
.description {
    font-size: 16px;
    float: right;
    width: calc(100% - 240px - 29px); /* 自动计算剩余可用宽度 */
}
.vehiname {
    font-size: 18px;
    color: green;
}
.price {
    color: red;
}
footer {
    color: #333;
    background-color: blue;
}

方案二：更推荐改用flex布局 #

flex布局实现这类两列展示逻辑更简单，无需处理浮动清除，对齐方式调整更灵活，也完全满足你保留边框和.mc-info宽度的要求，修改代码如下：

.header {
    background-color: #333;
    color: #FFF;
    padding: 30px;
}
.content {
    width: 800px;
}
.mc-info {
    height: auto;
    border: 2px solid;
    width: 800px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    display: flex; /* 启用flex布局 */
    gap: 29px; /* 替代img的margin-right，设置两列间距 */
    align-items: flex-start; /* 顶部对齐，可改center实现垂直居中对齐 */
    padding: 10px; /* 可选，增加内边距避免内容贴边框 */
}
.mc-info-image {
    width: 240px;
    flex-shrink: 0; /* 禁止图片容器被压缩 */
}
.mc-info-image img {
    width: 100%;
    height: 340px;
    object-fit: cover; /* 可选，保证图片不变形 */
}
.description {
    font-size: 16px;
    flex-grow: 1; /* 自动占满剩余宽度 */
}
.vehiname {
    font-size: 18px;
    color: green;
}
.price {
    color: red;
}
footer {
    color: #333;
    background-color: blue;
}

额外建议 #

• 统一使用box-sizing: border-box全局规则，避免盒模型计算带来的宽度溢出问题，可在CSS开头添加* {box-sizing: border-box;}全局生效
• 若后续需要适配移动端，flex布局的响应式调整成本远低于浮动布局

内容的提问来源于stack exchange，提问作者avenas8808