子div在父div上对齐溢出？

Question

Hello Stackoverflow团队，

带溢出的父div内的子div怎么能有左右边距？我试图解决这个问题，但它没有为它提供一个干净的解决方案。

尝试：

保证金 - 权利不会工作

＆＃13;

＆＃13;

div {
  border: 1px solid black;
}

.parent {
  width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  overflow: auto;
}

.child {
  width: 350px;
  height: 150px;
  top: 50px;
  margin-left: 20px;
  margin-right: 20px;
  position: absolute;
  display: inline-block;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我的不洁解决方案：

＆＃13;

＆＃13;

div {
  border: 1px solid black;
}

.parent {
  width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  overflow: auto;
}

.child {
  width: 350px;
  height: 150px;
  top: 50px;
  margin-left: 20px;
  border-right: 20px solid red;
  position: absolute;
  display: inline-block;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

解决问题的更好方法是什么？

Answer 1

由于您正在为孩子使用position: absolute，因此最好的方法是删除position: absolute，然后添加您需要的边距。

div{
  border: 1px solid black;
}
.parent {
    width:300px;
    height:300px;
    margin:auto;
    position: relative;
    overflow: auto;
}

.child {
    width:350px;
    height:150px;
    top: 50px;
    margin: 50px 20px 0;
    display: inline-block;
}

<div class="parent">
    <div class="child"></div>
</div>

<强>更新

如果您需要将子div设为position: absolute，则必须将其包装在另一个div中，如下所示：

div{
  border: 1px solid black;
}
.parent {
  width:300px;
  height:300px;
  margin:auto;
  position: relative;
  overflow: auto;
}
.child {
  border-color: red;
  position: absolute;
  top: 20px;
  height: 150px;
}
.sub-child {
  width:350px;
  height:150px;
  margin: 0 20px;
  display: inline-block;
}

<div class="parent">
  <div class="child">
    <div class="sub-child"></div>
  </div>
</div>