Question

我如何在两个div节之间垂直放置图像，以便我可以完成以下任务：

设置图像与部分重叠的确切宽度。示例 - 我想要将图像高度的30％作为顶部div的一部分，将图像高度的70％放在底部div上
为实现上述目标，所有屏幕尺寸/浏览器都具有一致性

这是一个说明我的意思的例子：

从我所看到的内容来看，很多人只是将边距设置为负像素数量或使用顶部/底部并设置像素数量，但我认为这不兼容屏幕尺寸

非常感谢你的帮助，这意味着很多

Answer 1

尝试此操作，您可以image在div id img中插入#div1{width:400px;height:100px;background:red;} #div2{position:relative;width:400px;height:100px;background:yellow;z-index:1;} #image{width:40px;height:40px;background:green;position:relative; margin-left:180px;margin-top:-20px;margin-bottom:-20px;z-index:2}

＆＃13;

<div id="div1"></div>
<div id="image"></div>
<div id="div2"></div>

＆＃13;

    #div1{position:relative;width:50%;height:100px;background:red;z-index:2;}
            #div2{position:relative;width:50%;height:100px;background:yellow;z-index:1;}
            #image{position:absolute;bottom:-20%;/* 2/3=66.6 */
              left:35%;z-index:4;
            width:30%;
            height:30%;background:green;
            }

＆＃13;

＆＃13; 使用％宽度

＆＃13;

    <div id="div1">  <div id="image"></div></div>
           
            <div id="div2"></div>

＆＃13;

setDT()

＆＃13;

Answer 2

您可以在图片元素周围添加2个父项，一个使用position:relative;，另一个（嵌套div）添加position:absolute;。然后，对于img代码，请应用margin-top:-30%;将其放置在所需位置。

要使图像居中：我们将left:50%设置为内部div（图像的父级）并为图像设置margin-left:-50%;，如下所示：

＆＃13;

#div1 {background: #e0f0e0; padding: 1em;}
#div2 {background: #e0e0f0; padding: 1em;}

#divImg {position:relative; border:1px solid red; }

#divImg2 {position:absolute; border:1px solid blue; left:50% }

#divImg img { margin-left:-50%; margin-top:-30%; }

＆＃13;

<div id="div1">Section 1<br/>Contents of div1 ...<br/><br/>123<br/>456<br/></div>

<div id="divImg">
  <div id="divImg2">
    <img src="http://triptopersia.com/wp-content/uploads/2016/04/Iranian-Cheetah-2.jpg" style="width:150px" />
  </div>
</div>

<div id="div2">
  Section 2<br/>Contents of div2 ...<br/>
  <br/>
  ABCD<br/>EFGH<br/>
  123<br/>456<br/>
</div>

＆＃13;

红线表示第一个位置的边框：相对div（divImg）
蓝线表示第二个位置的边框：绝对div（divImg2）

img元素的最终位置相对于第二个div移位margin-left:-50%; margin-top:-30%;

CSS - 如何在2节div之间放置图像？

2 个答案: