容器 div 不包含内部 div答案

【问题标题】：Container Div does not contain the inner div容器 div 不包含内部 div
【发布时间】：2015-12-29 14:21:14
【问题描述】：

这是我的代码：

.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>

请看小提琴：

https://jsfiddle.net/9d8wq0by/

【问题讨论】：

好的..但是有什么问题？
是this你想要什么？
id为right的div应该出现在"a"里面
当前 a 显示为一行。作为块元素的 Div 应该扩展到它的内容。

标签： html css

【解决方案1】：

它不包含子元素，因为绝对定位的元素已从正常流程中删除。作为替代方案，您可以将元素浮动到右侧，然后将 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;
}

【讨论】：

【解决方案2】：

见this小提琴

您为.right 指定了position:absolute，为#a 指定了position:relative，这是错误的。

要么你必须同时指定，父母和孩子的位置相同，或者父母应该是绝对定位，而孩子是相对的。

见fiddle

.right 的更新后的 CSS 如下

.right {
    position: relative;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

更新

要使.right div 固定在右侧，您只需在CSS 中为.right 添加一个float:right。

【讨论】：

对我不起作用，请附上小提琴。我想在另一个里面看到 .right DIv。
运行你的小提琴，.right Div 显示在左边而不是右边。
@SNash 怎么样？是你需要的吗？

【解决方案3】：

父级应该是absolute，子级应该是relative。你反其道而行之。

父母也可以是relative

.right {
    position: relative;
    float: right; //You need this to make the child glue to the right of the parent
    right: 0;
    max-width: 300px;
    padding: 10px;
}

body {
    margin: 0;
    padding: 0;
}

#a
{
 border: 3px solid #73AD21;
 position:  absolute;
 width:100%;

}

<html>
<head>
</head>
<body>
<div id="a">
<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>
</div>

</body>
</html>

【讨论】：

看在奥丁的份上，告诉我你父亲的建议是什么。
我已将float: right 添加到子级，因此它会粘在父级的右侧。

【解决方案4】：

结合上述答案，您可以使用 float: right 方法，您可以添加 css 来清除浮动。所以新的 .right CSS 和 clearfix 将是：

.right {
float:right;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

a:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 width: 100%;
}

【讨论】：