Question

我有一个没有高度的浮动div（.card）。它包含带有图像的嵌套div（.image）。图像使.card的边界框展开以包裹图像。

然而，当我将.text内的第二个div（.card）作为.image的兄弟姐妹并且使用负边距顶部将.text置于顶部时图像，图像不再设法扩展.card的边界框以匹配图像的底部。 .card的底部边界向上爬行并跟随.text的底部边界。

为什么在.text出现时图像不能再成功扩展其祖母？

<div class="card">
  <div class="image">
    <img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div>
</div>
<div class="card">
  <div class="image">
    <img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div>
  <div class="text"></div>
</div>

img {
  display: block;
}

.card {
  border: 1px solid black; //shows where the bounding-box of this div is 
  width: 200px;
  position: relative;
  float: left;
}

.text {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: -120px;
  position: relative;
}

Answer 1

如果你的观点没有错，那么你就错过了位置：绝对。

请记住，只有当父div为相对且内部元素为绝对值时，才能修复内部元素的位置。

<强>已更新

这个问题正在发生，因为你试图在.card（父）里面使用.txt（child），位置相对但方法错误。记住每当你使用position时，parent应该是相对的，而child将是绝对的，所以child将在父容器内移动而不会破坏流程（在你的情况下它会影响父div并打破边界）所以来过这个问题使用位置：绝对对孩子，然后你可以轻松使用.txt类。

只需更改.text类中的position: relative; to position: absolute;即可。

请参阅here

这个div崩溃的例子是什么？

1 个答案: