HTML两栏图文并排设置左外边距导致图片下移如何解决

布局换行是盒模型宽度溢出导致的：

• 你代码里的col-lg-6是标准栅格类（Bootstrap默认栅格类），默认规则是单个列占父容器50%宽度，两个列加起来刚好填满整行
• 你给所有.col-lg-6加了margin-left: 20px，外边距会额外占据布局空间，两个列的总宽度变成100% + 40px，超出父容器宽度上限，第二个放图片的列自然被挤到下一行
• 另外你给图片写了固定宽度width="770"，图片不会自动适配列宽，就算宽度不溢出，也大概率撑破右侧列的边界。

方案1：用内边距做列间距（最适配栅格规则） #

栅格系统本身就是靠列的内边距实现列间距的，不要直接给列加外边距，配合border-box盒模型就不会出现宽度计算问题：

@charset "utf-8";
/* 统一盒模型，padding、border不会额外撑大元素宽度 */
* {
    box-sizing: border-box;
}
.container .row {
    display: flex;
    flex-wrap: wrap;
    /* 抵消列两侧内边距带来的多余留白 */
    margin: 0 -10px;
}
.container .row .col-lg-6 {
    width: 50%;
    /* 用内边距做列之间的留白，不要用margin */
    padding: 0 10px;
}
/* 图片自动适配列宽，不会撑破容器 */
.col-lg-6 img {
    width: 100%;
    height: auto;
    display: block;
}

方案2：保留margin的写法，重新计算列宽 #

如果一定要用外边距做间距，把margin占的宽度从列宽里扣除，保证总宽度不超过父容器的100%：

@charset "utf-8";
* {
    box-sizing: border-box;
}
.container .row {
    display: flex;
}
.container .row .col-lg-6 {
    /* 每个列扣除10px宽度，给margin留空间 */
    width: calc(50% - 10px);
    margin-left: 20px;
}
/* 第一个列去掉左外边距，避免整体内容向右偏移 */
.container .row .col-lg-6:first-child {
    margin-left: 0;
}
.col-lg-6 img {
    width: 100%;
    height: auto;
    display: block;
}

方案3：用flex gap设间距（写法最简单） #

不需要兼容IE等老旧浏览器的话，直接给flex容器加gap属性设间距，完全不用手动计算列宽：

@charset "utf-8";
* {
    box-sizing: border-box;
}
.container .row {
    display: flex;
    /* 直接定义两个列之间的间距为20px */
    gap: 20px;
}
.container .row .col-lg-6 {
    width: 50%;
    /* 禁止列被内容挤压变形 */
    flex-shrink: 0;
}
.col-lg-6 img {
    width: 100%;
    height: auto;
    display: block;
}

• 栅格列不要直接加外边距，原生Bootstrap栅格的列间距就是靠「行容器负margin+列padding」实现的，乱加margin必然破版
• 放在响应式列里的图片不要写死固定像素宽高，设width: 100%; height: auto就能自动适配不同尺寸的容器
• 用flex做横向布局时，给子项加flex-shrink: 0可以避免内容过多时列被异常压缩。

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