这是一个简化我的布局：
<div style="position: relative; width:600px;">
<p>Content of unknown length</p>
<div>Content of unknown height</div>
<div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div>
</div>
我遇到的问题是,如果文本/未知div内容太长,那么它与我绝对定位的div重叠.
我已经搜索网络和SO的解决方案,唯一一个我发现建议放置一个绝对定位的div的无形的div – 麻烦是如果我可以做,我不需要有绝对定位的div首先(或者我在这里错过了点).
在我下去jquery路线之前,任何人都可以想到一个css解决方案？
解决方法
谢谢你所有的答案,虽然都是正确的,但实际上并没有解决我的问题.
对我来说,解决方案是在未知长度内容的末尾创建第二个不可见的div,这个不可见的div与我绝对定位的div的大小相同,设置为left左边,这样可以确保在结束我的内容为绝对定位的div和房间可用它将位于左侧浮动的内容.
对我来说,解决方案是在未知长度内容的末尾创建第二个不可见的div,这个不可见的div与我绝对定位的div的大小相同,设置为left左边,这样可以确保在结束我的内容为绝对定位的div和房间可用它将位于左侧浮动的内容.
此答案以前在此提供：
Prevent absolutely-positioned elements from overlapping with text
但是我没有看到(直到现在)如何将它应用到右下角的div.
新结构如下：
<div style="position: relative; width:600px;">
<p>Content of unknown length</p>
<div>Content of unknown height</div>
<div id="spacer" style="width: 200px; height: 100px; float:left; display:inline-block"></div>
<div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div>
</div>
这似乎解决了这个问题.
