当内容大于 div1 的大小时放置 div2答案

【问题标题】：Placing div2 when the content is bigger than the size of div1当内容大于 div1 的大小时放置 div2
【发布时间】：2013-10-28 06:00:29
【问题描述】：

我尝试使用响应式 css 在移动设备上呈现页面。我无法更改 html，我尝试仅使用 css 解决我的问题。

想象一下我有一个这样的 div：

#example {
   width : 25px;
   height : 25px;
}

在这个 div 中，我有一个 1024*768 的图像。所以内容比竞争者大（我会展示所有的内容）我的问题是下面的内容会放在顶部25px处，而不是图片下方。

编辑：一个新的 jsfiddle，更精确：http://jsfiddle.net/eABu5/12/

你有什么想法吗？非常感谢

【问题讨论】：

当你的图片尺寸较大时，为什么你#example div 的尺寸设置为25x25？
div 永远不会改变维度。该图像在此处用于演示，但在我的情况下它是文本。看看新的 jsfiddle：jsfiddle.net/eABu5/11
关于#under 标题/标签元素，您希望它定位在图像底部边缘下方还是#example 底部边缘下方，这样溢出的图像就会被覆盖文本以使标题/标签不可见？
查看最新的 Jsfiddle：jsfiddle.net/eABu5/12。 #under 必须位于 Lorem Ipsum 中的文本下方，无论文本大小如何。谢谢马克！

标签： css html height overflow

【解决方案1】：

LIVE DEMO

CSS

#example {
   width : 250px;
   height : 250px;
   background-color : #123456;
}

#pic {
   margin-top: 250px;
   float: left;    
}


#under {
   margin-top: 10px; 
   float: left;
}

【讨论】：

谢谢！您的解决方案在您的演示和 jsfiddle 中完美运行......但在我的网站中却没有：/ 我将继续我的调查 :)
我已经更准确地重现了在我的精确情况下不起作用的东西。内容有一个 position : relative 和一个与 div 大小相同的 top。看演示：jsfiddle.net/eABu5/11
非常感谢@aldanux！但这并不完全正常。为了更好地理解，我用文本替换了图像。文本可以有不同的高度。如果文本长于 250px，没关系。但是当小于 250px 时，文本和行之间有一个边距。看看我更新的 Jsfiddle ：jsfiddle.net/eABu5/12 再一次：谢谢，你真好！
@Thomas :) 好的......我想我现在肯定有解决方案......我已经更新了我的答案。您可以更改文本 (#pic)，文本 (#under) 始终位于下方并留有边距（如果需要）。试试看，如果能解决您的问题，请告诉我。
谢谢，谢谢，谢谢。感谢您的耐心和帮助。你今天真的简化了某人的生活:)