Question

是否存在仅CSS / HTML的方式来考虑溢出内容的大小？考虑下面的示例：

.outerZeroSize {
  width: 0px;
  height: 0px;
  overflow: visible visible;
}

.innerContent {
  width: 200px;
  height: 300px;
}

.belowContent {
  
}

<div class="outerZeroSize">
  <div class="innerContent">
    Some content<br/>
    Some more content <br/>
    And some more
  </div>
</div>
<div class="belowContent">Content below</div>

div belowContent中的文本以innerContent的文本结尾。

问题：由于height的{{1}}是innerContent，我希望300px出现在{{ 1}}（而不是位于其顶部）。 CSS / HTML是否可能？

约束：

假设belowContent和300px不能更改（HTML或CSS部分都不能更改），因为它们来自第三方（React-Virtualized Table）。
更新：outerZeroSize的高度可以动态更改，.outerZeroSize只是一个示例（因此，不能将.innerContent偏移相同的数量），或者）。
可以更改的是.innerContent（HTML和CSS），当然可以在300px div的周围添加内容。

Related question（从React Virtualized Table的角度来看）。

Answer 1

只需将 300像素页边距添加到belowContent。

.outerZeroSize {
  width: 0px;
  height: 0px;
  overflow: visible visible;
}

.innerContent {
  width: 200px;
  height: 300px;
}

.belowContent {
  margin-top: 300px;
}

<div class="outerZeroSize">
  <div class="innerContent">
    Some content<br/>
    Some more content <br/>
    And some more
  </div>
</div>
<div class="belowContent">Content below</div>

另一种解决方案是将belowContent移到outerZeroSize内。

.outerZeroSize {
  width: 0px;
  height: 0px;
  overflow: visible visible;
}

.innerContent {
  width: 200px;
  height: 300px;
}

.belowContent {
  width: 200px;
}

<div class="outerZeroSize">
  <div class="innerContent">
    Some content<br/>
    Some more content <br/>
    And some more
  </div>
  <div class="belowContent">Content below</div>
</div>

考虑溢出内容的大小以进行定位

1 个答案: