SVG图片float:left失效，无法与表格左右并排布局求助

你需要实现SVG（左侧70%宽度）和表格（右侧30%宽度）的左右并排布局，当前代码因浮动布局的兼容性问题导致错位。以下是修复方案：

修改后的CSS代码 #

/* 父容器改用flex布局，实现弹性并排 */
.double_column_row_70_30 {
  width: 100%;
  display: flex;
  gap: 10px; /* 可选：添加列间距 */
  box-sizing: border-box;
}

.row_left_column_70_30 {
  width: 70%;
  box-sizing: border-box;
}

.row_right_column_70_30 {
  width: 30%;
  box-sizing: border-box;
}

/* 确保SVG容器和SVG元素占满宽度 */
.svg-container {
  padding-right: 10px;
}

.svg-container svg {
  display: block;
  width: 100%;
  height: auto; /* 保持SVG比例 */
}

/* 让表格自适应右侧列宽度 */
.row_right_column_70_30 table {
  width: 100%;
  border-collapse: collapse; /* 可选：优化表格样式 */
}

HTML结构无需修改，保持原代码即可。

关键修改说明 #

• 替换浮动为Flex布局：flex布局比float更稳定，能自动处理列的对齐和空间分配，避免浮动元素错位或需要清除浮动的问题
• 添加box-sizing: border-box：确保padding和border不会撑开容器宽度，保证70%/30%的占比准确
• 优化SVG和表格的宽度适配：强制SVG和表格占满各自父容器的宽度，避免内容溢出或缩窄
• 可选添加gap属性：替代padding实现列间距，布局更整洁

效果对比 #

当前输出：

预期输出：

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