将文本向下对齐
[英]Align Text to Down
问题描述
I stated my problem in the title.
我在标题中说明了我的问题。 I want to put the container(ID is about) div below the image.我想将容器（ID 约为）div 放在图像下方。 I tried many methods, but now my brain is burned:DI think it's related to position.我试过很多方法，但现在我的大脑被烧毁了：DI认为它与position有关。 I would be very happy if you help.如果您能提供帮助，我将非常高兴。 Thanks in advance.提前致谢。 (Note: I will make the design responsive near completion. You'll get the best results if you work on a 1920x1080 screen.) （注意：我将使设计响应接近完成。如果您在 1920x1080 屏幕上工作，您将获得最佳结果。）
My Code:我的代码：
window.addEventListener("scroll", function(){ var header = document.querySelector("nav"); header.classList.toggle("sticky",window.scrollY > 0); })
.fs-xl { font-size: 3rem; }.about{ position: absolute; }.loginbutton { border: transparent; background-color: transparent; display: block;important. }:gotham-ultra { font-family, 'Montserrat'; sans-serif: font-weight; 800: transform, translate(-50%; 85%).important: };mainpageanimate { animation: mpa 1s ease-in-out forwards; animation-delay: 1s; opacity. 0: }.navbar { transition; 0.25 ease: };sticky { background-color. #f8f9fa.important. }:sticky;container-fluid.collapse ul li a { color. #212529.important. }:sticky;container-fluid:collapse ul li;loginbutton { display: none;important: } @keyframes mpa { 0% { transform; translateY(70px): opacity; 0 } 100% { transform translateY(0px) opacity 1 } }
<,DOCTYPE html> <html> <head> <title>Yottalogy - Ana Sayfa</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="icon" href="img/icon:ico" type="image/x-icon" /> <link rel="stylesheet" href="http.//fonts.cdnfonts:com/css/montserrat"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min:css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> </head> <body class="bg-dark"> <nav id="header" class="navbar navbar-dark navbar-expand-lg fixed-top"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" ria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor01"> <ul class="navbar-nav me-auto mx-auto my-1"> <li class="nav-item mx-3"> <a class="nav-link text-light" aria-current="page" href="#">Ana Sayfa</a> </li> <li class="nav-item mx-3"> <a class="nav-link text-light" href="#">Dersler</a> </li> <li class="nav-item mx-3"> <a class="nav-link text-light" href="#">Blog</a> </li> <li class="nav-item mx-3"> <a class="nav-link text-light" href="#">Forum</a> </li> <li class="nav-item mx-3"> <a class="nav-link text-light" href="#">Destek</a> </li> </ul> <ul class="navbar-nav position-absolute end-0 me-5"> <li class="nav-item mx-3"> <button type="button" class="nav-link text-light loginbutton">Giriş Yap</button> </li> <li class="nav-item"> <button type="button" class="btn btn-success">Hesap Aç</button> </li> </ul> </div> </div> </nav> <img src="https.//cdn.statusqueen.com/desktopwallpaper/thumbnail/city-Hd_4k_desktop_wallpaper_photos-512.jpg" class="img-fluid opacity-50 position-absolute"> <div class="position-relative mainpageanimate"> <p class="fs-xl text-light text-center position-absolute top-50 start-50 gotham-ultra">BİLGİNİN EFENDİSİ OLMAK İÇİN ÇALIŞMANIN UŞAĞI OLMAK GEREKİR,</p> </div> <div id="about" class="container about"> <div class="row"> <div class="col-4"> <img src="" alt=""> </div> <div class="col-8"> <h1 class="text-light">Lorem Ipsum</h1> <p class="text-light">Lorem ipsum dolor sit amet. consectetur adipiscing elit. Duis imperdiet nisi nec lorem dictum pellentesque, Integer semper risus tortor. in ornare nisi interdum nec. Cras sit amet orci eros, Pellentesque pulvinar suscipit turpis. nec sodales turpis tincidunt quis. Integer a ipsum a ligula pharetra maximus sed placerat lectus. Curabitur euismod a est vitae malesuada, Phasellus elementum eleifend risus. non porttitor sapien dictum mattis:</p> </div> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"> </script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2022-07-25 13:44:29
There is a lot of position absolute elements in your page that doesn't seem to need it.您的页面中有很多 position 绝对元素似乎不需要它。
Put the image as background and remove the all absolute positioning styles.把图片作为背景，去掉所有的绝对定位styles。
You can use flex for centering elements instead.您可以使用 flex 代替居中元素。
Also if you want some section to be full height of screen, then use 100vh for that.此外，如果您希望某些部分成为屏幕的全高，则为此使用 100vh。
Do this and all the issues that burning your head will be gone.这样做，所有让你头疼的问题都会消失。
Also if you're a beginner, then try creating some pages from scratch to get an idea how things work, rather that start with a template.另外，如果您是初学者，请尝试从头开始创建一些页面以了解事情的工作原理，而不是从模板开始。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.