我有两个 DIV,它们的大小可能(都)不同。它们需要从父框元素的相同(左上)位置开始,但此(外部)框的高度应与较大的内部元素相同。
当使用绝对定位(使元素重叠的常用方法)时,绝对定位的元素从流中取出 - 并且不会影响外框的高度:
HTML 示例:
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="other">
Subsequent content
</div>
CSS:
div.outer { position: relative }
div.outer div.inner1 { width: 200px; height: 150px; border: 1px solid green; position: absolute }
div.outer div.inner2 { width: 200px; height: 120px; background-color: yellow }
div.other { background-color: red }
fiddle :http://jsfiddle.net/L5qLrv4x/ -(我希望红色 DIV“其他”位于两个内部 DIV 中较大的一个下方)
我不想使用 JavaScript。是否有仅 CSS 的解决方案可以在同一位置放置两个元素(高度可变)并让它们保持流动以影响周围的内容?
谢谢!
用例
为什么有人需要这个?受访者可以将屏幕截图粘贴到我的网络应用程序中。除非已粘贴,否则虚拟 DIV 表示可以粘贴屏幕截图的位置。此虚拟对象也是 contenteditable="true"
以获取粘贴的内容。
当屏幕截图被粘贴时(可能与虚拟对象有不同的宽高比),它将显示在(透明)虚拟对象后面的 DIV 中。虚拟对象必须保持在顶部以捕获进一步的粘贴事件 - 新的屏幕截图可能会替换第一个粘贴的屏幕截图。
一个额外的表单输入被放置在这个虚拟+预览框的下方。当然,虚拟对象和屏幕截图都不应与此输入重叠。
正如我的用例所示,JavaScript 是一种选择。我对纯 CSS 解决方案的问题有两个原因:(a) 纯粹的兴趣——我了解到寻找新的解决方案通常在其他情况下也很有帮助。 (b) 需要(额外)维护的 JS 代码更少。
最佳答案
你可以做一个技巧,但是这个解决方案只是针对你的问题。 它一点也不通用。
诀窍是将第二个 div
“返回”到第一个 div 位置。
div.outer {
position: relative;
}
div.outer div.inner1 {
width: 200px;
height: 150px;
border: 1px solid green;
float:left;
}
div.outer div.inner2 {
width: 200px;
height: 120px;
background-color: yellow;
transform:translateX(-100%);
float:left;
}
div.outer div.inner2.higher {
height:200px;
}
div.other {
background-color: red;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
<h1>Div 1 is higher</h1>
<div class="outer cf">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="other">
Subsequent content
</div>
<hr />
<h1>Div 2 is higher</h1>
<div class="outer cf">
<div class="inner1"></div>
<div class="inner2 higher"></div>
</div>
<div class="other">
Subsequent content
</div>
关于html - 同一位置上的两个 DIV - 但不与其他内容重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34039607/