我在HTML和CSS上还很陌生(2周),这是iam第一次使用Stack溢出。我试图将img的位置放在div的底部以及底部侧面的中心,并且无法找到解决方案。我想在不使用位置的情况下执行此操作:绝对,因为在较小/较大的屏幕上打开页面时,img会移动。
这是我要移动的这张图片:“<img class="mnt" src="mountain.png" alt="mountain image">
body { text-align: center; margin:0; } h1 { font-size: 5.6rem; margin:0; color: white; line-height: 2; font-family: 'Clicker Script', cursive; } h2 { font-weight: normal; font-family: 'Kavivanar', cursive; } .nav { background-color: #87c6eb; text-align: right; padding-top: 50px; } .top { background-color: #87c6eb; height: 100vh; } .programer { font-size: 150%; color: white; } .top-cloud { position:absolute; top:100px; right: 300px; opacity: 70%; } .bottom-cloud { position:absolute; left: 350px; opacity: 45%; } .mnt { /* ???????? */ }
<div class="top"> <nav class="nav"> <a href="#About" class="navigation">About</a> <a href="#Work" class="navigation">Work</a> <a href="#contact" class="navigation">Contact</a> </nav> <img class="top-cloud" src="cloud.png" alt="cloud img"> <h1>I`m Veljko</h1> <h2 class="programer"><em>future programmer</em></h2> <img class="bottom-cloud" src="cloud.png" alt="cloud img"> <img class="mnt" src="mountain.png" alt="mountain img"> </div>
我在HTML和CSS上还很陌生(2周),这是iam第一次使用Stack溢出。我试图将img的位置放在div的底部以及底部侧面的中心,并且...
您可以尝试一下,它对我有用。
使用flex非常简单,我将.top高度增加到300vh,因此您可以在这里轻松看到结果,