Question

我有一个div应该包含文本，并在下面显示一个图像我不希望那个图像永远不会出现那个div。在底部。
该图像最大值应为128px 但是当div上方的文字太大时，图像应该变小我已经尝试了一些东西，但这个粘贴图像到了浏览器的底部：

<div style="width:250px; height:300px;background:#ff0000;">
    <div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/></div>
    <img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: absolute;
                                                                                                 bottom: 0;
                                                                                                 set left: 0;
                                                                                                 height: 24px;"/>
  </div>

更新

<div style="width:250px; height:300px;background:#ff0000;">
    <div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>
hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>
    <img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: relative;bottom: 0;left: 0; height:100%;"/>
  </div>

更新 http://jsfiddle.net/jjehN/

Answer 1

更新：根据您的需要，请改用“float”。请记住在浮动后使用“clear”，这样就不会破坏页面。继承你的代码，使用textwrapping

<div style="position:relative;width:250px; min-height:300px;background:#ff0000;">
    <div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>

            <img src="http://tools.android.com/_/rsrc/1306369561351/recent/miscellaneousimprovements-1/android_icon_128.png"style="float:bottom;
                      bottom: 0;left: 0; background:#0000ff;max-height: 100%;"/>
    <div style="clear:both;"></div>
  </div>

使图片缩小/增长。使用Javascript。也许jQuery对你来说最简单。如果您发现任何使用它的麻烦，请在Stackoverflow上重新开始。

最诚挚的问候纳斯

Answer 2

试试这个：

<div style="width:250px; height:300px;background:#ff0000;position: relative;">
  <div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>
    hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>
  <img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: absolute;bottom: 0;left: 0; height:100%;"/>
</div>

将图像粘贴到div底部

2 个答案: