如何在div1容器内将div4定位至右侧？

问题分析 #

你当前的代码中，.div4 使用 margin-left: auto 未生效，核心原因是 .div2 作为块级元素占据了左侧整行空间，导致 .div4 无法自动填充剩余空间靠右。以下是几种可行的解决方案：

方法1：Flex布局（推荐，现代布局方案） #

给父容器 .div1 添加Flex属性，轻松实现左右元素的对齐，同时保持布局的灵活性：

.div1 {
  background-color: #A6C3EE;
  position: relative;
  margin: 30px;
  height: 550px;
  width: 1200px;
  color: white;
  /* 新增Flex布局属性 */
  display: flex;
  justify-content: space-between; /* 左右两端对齐内部元素 */
  padding: 0 30px; /* 替代内部元素的左右margin，避免溢出 */
  box-sizing: border-box; /* 让padding包含在宽高内，不破坏尺寸 */
}

.div2 {
  background-color: #BDE2FE;
  text-align: center;
  margin: 30px 0; /* 仅保留上下margin */
  height: 450px;
  width: 300px;
}

.div3 {
  background-color: #BDE2FE;
  position: absolute;
  width: 450px;
  height: 150px;
  bottom: 30px; /* 调整bottom值，匹配父元素margin */
  right: 15%;
  left: 45%;
  margin-left: -150px;
}

.div4 {
  background-color: #BDE2FE;
  width: 100px;
  height: 450px;
  margin: 30px 0; /* 仅保留上下margin */
}

方法2：绝对定位（基于现有父元素相对定位） #

利用 .div1 已设置的 position: relative，直接将 .div4 基于父容器右侧定位：

.div4 {
  background-color: #BDE2FE;
  width: 100px;
  height: 450px;
  position: absolute;
  top: 30px; /* 和.div2的top margin保持一致 */
  right: 30px; /* 距离父容器右侧30px */
}

注：绝对定位元素会脱离文档流，需手动调整 top/right 值保证和其他元素的间距匹配。

为什么你之前的尝试无效？ #

• position: fixed：元素相对于视口定位，而非父容器 .div1，会直接脱离父元素范围。
• position: relative：仅让元素相对于自身原始位置偏移，不会改变它在文档流中的占位，无法实现靠右效果。
• float: right：.div2 作为块级元素默认占据整行，.div4 会被挤到下一行，需配合 .div2 浮动才能生效，但维护性不如Flex布局。

内容的提问来源于stack exchange，提问作者sugar pixie In space