【发布时间】：2022-02-14 16:23:26
【问题描述】：
我有以下code（也粘贴在下面），我想在其中制作两列的布局。在第一个中，我放了两张图片，在第二个中显示了一些文字。
在第一列中，我希望第一张图片带有width:70%，第二张图片带有position:absolute。最终结果应该是this
如您所见，第二张图片部分位于上方每个屏幕的第一张图片中，768px。
我可以在第一张图片上部分定位第二张图片，但这不是动态的，如果您更改屏幕尺寸，您可以看到它是如何折叠的。
但无论我如何努力，我都无法达到这个结果。
.checkoutWrapper {
display: grid;
grid-template-columns: 50% 50%;
}
.coverIMGLast {
width: 70%;
height: 100vh;
}
/* this .phone class should be dynamically located partially on first image */
.phone {
position: absolute;
height: 90%;
top: 5%;
bottom: 5%;
margin-left: 18%;
}
.CheckoutProcess {
padding: 5.8rem 6.4rem;
}
.someContent {
border: 1px solid red;
}
/* removing for demo purposes
@media screen and (max-width: 768px) {
.checkoutWrapper {
display: grid;
grid-template-columns: 100%;
}
img {
display: none;
}
.CheckoutProcess {
padding: 0;
}
}
*/<div class="checkoutWrapper">
<img src="https://via.placeholder.com/300" class="coverIMGLast" />
<img src="https://via.placeholder.com/300/ff0000" class="phone" />
<div class="CheckoutProcess">
<Content />
</div>
</div>【问题讨论】：
-
上面的demo基本上和你的图片很像。它在什么方面是错误的？请修改以更具体地了解问题。如果有一些文本代替 Content 组件可能会有所帮助。
-
请查看我在问题中提供的link。我认为 sn-p 在所有屏幕上都有静态宽度和高度，这是它没有显示问题的方式
-
你得到了什么？你可以截图并添加它吗？您发布的那个链接的屏幕宽度很小，因此默认情况下图像是隐藏的，增加尺寸会显示您所描述的图像。你遇到的实际问题是什么？从目前的内容很难判断
-
@someone 如果您已经尝试过我在下面粘贴的回复，我已对其进行了编辑，所以请接受新的回复。
-
不清楚您的问题是什么，请编辑您的问题以澄清您的代码与您想要的结果不匹配的原因。