方案一：弹性盒子布局

💡 Tips：左侧子盒子宽度固定，右侧子盒子 flex: 1

.parent {display: flex;width: 500px;height: 300px;border: 1px solid #ccc;box-sizing: border-box;margin-bottom: 20px;
}
.left-son {width: 100px;height: 100%;background: #4a90e2;
}
.right-son {flex: 1;height: 100%;background: #dfffdf;
}

方案二：绝对定位 + padding

💡 Tips：父盒子相对定位，padding-left，左侧子盒子绝对定位

.parent {position: relative;padding-left: 100px;width: 500px;height: 300px;border: 1px solid #ccc;box-sizing: border-box;margin-bottom: 20px;
}
.left-son {position: absolute;left: 0;width: 100px;height: 100%;background: #4a90e2;
}
.right-son {height: 100%;background: #dfffdf;
}

方案三：绝对定位 + margin

💡 Tips：父盒子相对定位，左侧子盒子绝对定位，右侧子盒子margin-left

.parent {position: relative;width: 500px;height: 300px;border: 1px solid #ccc;box-sizing: border-box;margin-bottom: 20px;
}
.left-son {position: absolute;left: 0;width: 100px;height: 100%;background: #4a90e2;
}
.right-son {margin-left: 100px;height: 100%;background: #dfffdf;
}

方案四：行内块布局 + calc

💡 Tips：父盒子font-size: 0，子盒子行内块，左侧子盒子100px，右侧子盒子 calc(100% - 100px)

.parent {font-size: 0; /* 解决DOM换行引起的空白像素问题 */width: 500px;height: 300px;border: 1px solid #ccc;box-sizing: border-box;margin-bottom: 20px;
}
.left-son {display: inline-block;vertical-align: top;width: 100px;height: 100%;background: #4a90e2;
}
.right-son {display: inline-block;vertical-align: top;width: calc(100% - 100px);height: 100%;background: #dfffdf;
}

方案五：浮动 + BFC

💡 Tips：左侧子盒子浮动，右侧盒子 overflow:hidden; 触发 BFC

.parent {width: 500px;height: 300px;border: 1px solid #ccc;box-sizing: border-box;margin-bottom: 20px;
}
.left-son {float: left;width: 100px;height: 100%;background: #4a90e2;
}
.right-son {overflow: hidden;height: 100%;background: #dfffdf;
}