Question

我正在尝试将图像粘贴到一个div的底部并与其上方的div重叠。

右侧的图像并排有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>

小提琴上的CSS无法正常工作 - 我不知道该怎么做才能尝试。

Answer 1

你的问题是多方面的。

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

<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

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

我在这里更新了你的小提琴：http://jsfiddle.net/5U34m/4/

注意：


考虑使用id来定位特定的div。这里的课程非常混乱。

考虑使用响应式CSS框架（％和ems）而不是固定宽度的框架。

Answer 2

您需要使用position: absolute来设置图片样式。然后使用Left, Right, Top, Bottom属性根据需要定位它。

要调整哪个元素相互重叠，请使用z-index属性！

如何让图像粘在div的底部并与其上方的div重叠

2 个答案:

CSS