所以這是我的問題的形象。我有兩個 SVG 檔案，無論我如何調整視窗大小，我都希望它們粘在底部，如果我將其調整為移動配置，我希望它們堆疊在彼此之上
我想要的圖片
這是我的 CSS，但在我調整大小后，它們甚至不會停留在底部。我用兩種不同的顏色分割了背景
* {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
}
.column1 {
height: 100vh;
background-color: #679289;
}
.column2 {
height: 100vh;
background-color: #f4c095;
}
.svg1 {
overflow: visible;
transform: translate(0px, 68px);
}
.svg1 {
overflow: visible;
transform: translate(0px, 166px);
}
還要注意 SVG 的大小不同
uj5u.com熱心網友回復：
嘗試在 div 中包含元素并使用 flex-box。您可能需要針對其他布局元素進行調整，但原則應該相同。
https://codepen.io/jonshipman/pen/zYRoKjX
<div class="flex">
<div>
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" />
</div>
<div>
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" />
</div>
</div>
.flex {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
background: transparent;
}
.flex > div {
flex: 1 0 auto;
}
img {
width: 5rem;
height: 5rem;
display: block;
margin: 0 auto;
}
div {
background: blue;
}
div:nth-child(2) {
background: yellow;
}
@media screen and (max-width:786px) {
.flex {
flex-direction:column;
align-items:center;
}
.flex > div {
display:flex;
align-items:flex-end;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/476965.html
上一篇：如何在React中使用<animationMotion>的onend事件？
下一篇：Qt/SVG-獲取元素的準確坐標