Question

内部div可能比外部div大。外部div之后的元素只属于外部div的大小。

＆＃13;

.ov{
  overflow:visible;
}
.h100{
  height:100px;
}
.h200{
  height:200px;
}
.green{
  border-color:green;
}
.red{
  border-color:red;
}
.blue{
  border-color:blue;
}
div{
  border:3px solid black;
  margin:10px;
}

＆＃13;

<div class="green h100 ov">
  <div class="red h200">
  </div>
</div>
<div class="blue">
    I am right under green, but i like to be right under red!
</div>

＆＃13;

如何在缩小div后定位元素的溢出大小？

Answer 1

将height更改为min-height：

＆＃13;

.ov{
  overflow:visible;
}
.h100{
  min-height:100px;
}
.h200{
  min-height:200px;
}
.green{
  border-color:green;
}
.red{
  border-color:red;
}
.blue{
  border-color:blue;
}
div{
  border:3px solid black;
  margin:10px;
}

＆＃13;

<div class="green h100 ov">
  <div class="red h200">
  </div>
</div>
<div class="blue">
    I am right under green, but i like to be right under red!
</div>

＆＃13;

<强> ADDED

当然，你可以这样做：

＆＃13;

.ov{
  overflow:visible;
}
.h100{
  height:100px;
}
.h200{
  height:200px;
}
.green{
  border-color:green;
}
.red{
  border-color:red;
}
.blue{
  border-color:blue;
}
div{
  border:3px solid black;
  margin:10px;
}

＆＃13;

<div class="green h100 ov">
  <div class="red h200">
  </div>
  <div class="blue">
    I am right under green, but i like to be right under red!
  </div>
</div>

＆＃13;

但是如果你要添加style="overflow: hidden"，你会明白绿色块的真正边界在哪里：

＆＃13;

.ov{
  overflow:visible;
}
.h100{
  height:100px;
}
.h200{
  height:200px;
}
.green{
  border-color:green;
}
.red{
  border-color:red;
}
.blue{
  border-color:blue;
}
div{
  border:3px solid black;
  margin:10px;
}

＆＃13;

<div class="green h100 ov" style="overflow: hidden">
  <div class="red h200">
  </div>
</div>
<div class="blue">
    I am right under green, but i like to be right under red!
</div>

＆＃13;

Answer 2

这非常简单。我们可以使用浮动和透明对来向下移动蓝色框。我们将一个浮动的伪元素放在.red div下面和.green div里面

.green:after {
  content:'';
  float:left;
}

然后蓝框只需清除它就在它下面。

.blue {
  clear:left;
}

＆＃13;

.ov{
  overflow:visible;
}
.h100{
  height:100px;
}
.h200{
  height:200px;
}
.green{
  border-color:green;
}
.red{
  border-color:red;
}
.blue{
  border-color:blue;
}
div{
  border:3px solid black;
  margin:10px;
}
.green:after {
  content:'';
  float:left;
}
.blue {
  clear:left;
}

＆＃13;

<div class="green h100 ov">
  <div class="red h200">
  </div>
</div>
<div class="blue">
    I am under green, but now right under red too!
</div>

＆＃13;

垂直位置不尊重溢出

2 个答案: