html - Container Div 不包含内部 div

Question

这是我的代码:

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
body {
  margin: 0;
  padding: 0;
}
#a {
  border: 3px solid #73AD21;
  position: relative;
  width: 100%;
}

<div id="a">
  <div class="right">
    <p>This is a Test.</p>
  </div>
</div>

请看 fiddle :

https://jsfiddle.net/9d8wq0by/

Answer 1

它不包含子元素，因为绝对定位元素已从正常流中移除。作为替代方案，您可以将元素 float 到右侧，然后向父元素添加一个 clearfix。

您还可以将 box-sizing: border-box 添加到两个元素中，以考虑边框并将其包含在元素的高度/宽度计算中。

Updated Example

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
#a {
  border: 3px solid #73AD21;
  position: relative;
  width: 100%;
  overflow: auto;
}
#a, .right {
  box-sizing: border-box;
}

---

或者，除了将元素向右浮动，您还可以添加 margin-left: auto:

Updated Example

.right {
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
  margin-left: auto;
}