gpt4 book ai didi

javascript - CSS3 在响应式设计中使用重叠或并排定位

转载 作者:太空宇宙 更新时间:2023-11-04 11:54:09 26 4
gpt4 key购买 nike

我仍在学习 CSS3 和响应式设计。

Stack 很棒,在很多情况下都有帮助,但我仍然坚持这一点。

我想要一个具有倾斜图像的响应式网站,因此我尝试使用响应式并排的 div 或重叠的 div。 I found this bit of code下面,但它仍然没有按预期/期望的方式工作。

这是一个Fiddle这是一个好的开始,但最终我无法顺利调整

<body>

<div style="background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style="background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style="background-color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>

</body>

那么最好是并排 div 还是重叠 div,以进行流畅的响应调整?

由于我可能没有解释我正在寻找的东西,所以这是我试图解释的预期结果的草图

enter image description here

最佳答案

你想要这样的东西吗?

https://jsfiddle.net/7h0dL9jc/9/

html:

<body>
<div style="margin-left: 15%;">
<div class="box" style="background-color:red;"></div>
<div class="box" style="background-color:yellow;"></div>
<div class="box" style="background-color:green;"></div>
</div>
</body>

CSS:

.box {
background-image: url('https://placeimg.com/640/480/any');
width:33%;
height:200px;
float:left;
display: inline-block;
-ms-transform: skewX(-5deg); /* IE 9 */
-webkit-transform: skewX(-5deg); /* Safari */
transform: skewX(-5deg);
}

关于javascript - CSS3 在响应式设计中使用重叠或并排定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30414093/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com