html - 如何让图像贴在 div 的底部并与它上面的 div 重叠

Question

我试图让一张图片贴在一个 div 的底部并与它上面的 div 重叠。

fiddle 在这里:http://jsfiddle.net/5U34m/1/

右边有2个并排的div - 如果左边的内容比右边短，图像应该与它上面的行重叠 - 如果左边的内容比图像的高度长，那么图像应该贴在右边 div 的底部。 - 图像也应该在 div 中居中

这是 HTML:

<div class="container clearfix">

    <div class="wrap header">

        <div class="grid_6 logo">
            <img src="http://cba.thelibertylab.com/wp-content/uploads/cba-logo-placeholder.png" />
        </div>

        <div class="grid_6 phone">
            <!-- <p>p. 905-579-5302</p> -->
        </div>

    </div>  

    <div class="wrap upper-content">

        <div class="grid_6">
            <p>Nunc id porttitor lectus, et auctor ante. Morbi ullamcorper quam in leo auctor tempor. </p>
            <p> Morbi a enim nibh. Vestibulum molestie augue libero, vitae fringilla massa eleifend quis. </p>


        </div>

        <div class="grid_6 headshot"><div class="img-container"><img src="http://www.manncontractors.com.au/media/pics/site/imagecache/1/1/1176381DF49D6256D968FFB72490208C.jpg" height="400" width="300"/></div></div>

    </div>

    <div class="wrap lower-content">

        <div class="grid_6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
        </div>

        <div class="grid_6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 

        </div>

    </div>  

</div>

the CSS on the fiddle does not work correctly - 我不确定从这里尝试什么。

Answer 1

您的问题是多方面的。

您实际上希望文本在较长时下推图像，因此您的图像应该在 HTML 中下方您的文本，而不是与其相邻。你的结构应该是这样的:

<div> <!-- First row contains the text -->
  <div class="grid_6 txt>YOUR TEXT</div>
  <div class="grid_6></div>
</div>
<div class="grid_12"></div><!-- This one to prevent the float from stacking -->
<div> <!-- Second row contains the image and has height = 0 -->
  <div class="grid_6></div>
  <div class="grid_6 headshot">
    <div class="img-container">
      <img src="yourimg.jpg">
    </div>
  </div>
</div>

CSS

1. 首先从 .container 中清除样式 height:100%;。这种样式规则会抑制元素的扩展，并使子元素无法继承高度。 (在控制台中自行检查)
2. 如果你想让图像真正贴在底部，你必须设置 .grid6.headshot { line-height: 0; } line-height 属性实际上在您不想要的元素中插入不需要的空间。
3. 将 .img-container 属性 top: 70px; 替换为 margin-top: -450px;(你的图片高度)
4. 在包含文本的 grid_6 div 上设置一个 min-height，等于您的图像高度 (450px) - 您的标题高度 (94px) + 一些填充(10px) => 346px; 如果您不这样做，您的图像将与您的导航重叠
5. 对于@media only screen and (max-width: 767px)，设置.img-container { margin-top: 0; 否则图像将与移动设备上的文本重叠。

我在这里更新了你的 fiddle :http://jsfiddle.net/5U34m/4/

Note:

• Consider using id's to target specific divs. The classes here are quite a mess.
• Consider using responsive CSS frameworks (% and ems) instead of fixed-width ones.