个人中心
gpt4 book ai didi

html - div内容对齐问题

转载 作者：行者123 更新时间：2023-11-28 05:05:01 26 4
gpt4 key购买 nike

我对 HTML 和 CSS 没有太多经验。我在对齐我的 div 内容时遇到了一些问题。文本(Oculus Rift，下一代虚拟现实)必须与右下角的鼠标滚动按钮对齐。但是文本与上面的 div 重叠(我的粘性标题)。我就是无法让它工作。我托管了网站 over here .我希望它看起来像 this .

HTML:

<!DOCTYPE html>
<html>
<head>
<title>InGadget | D&#233; site voor al uw gadget nieuws!</title>

<meta name = "keywords" content = "InGadget | D&#233; site voor al uw gadget nieuws!" />
<meta name = "description" content = "InGadget is d&#233; site voor alles over gadgets." />
<meta name="viewport" content="width=device-width">


<link href="main.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/animatescroll.js"></script>

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

<script src="js/classie.js"></script>
    <script>
        function init() {
            window.addEventListener('scroll', function(e){
                var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                    shrinkOn = 100,
                    header = document.querySelector(".navbar");
                if (distanceY > shrinkOn) {
                    classie.add(header,"scroll");
                } else {
                    if (classie.has(header,"scroll")) {
                        classie.remove(header,"scroll");
                    }
                }
            });
        }
        window.onload = init();
</script>

<script>
    function logoSwitch () {
        $('.altLogo').each(function() {
            $(this).css('top',
                        $('.startLogo').offset().top -  $(this).closest('.row').offset().top
                       );
        });
    };

    $(document).scroll(function() {logoSwitch();});

    logoSwitch();
</script>

</head>
<body>
            <div class="navbar">
            <div class="container clearfix">
                <a id="logo" href="index.html"></a>
                <div class="nav">
                    <a href="index.html">Home</a>
                    <a href="#">Nieuws</a>
                    <a href="#">Forum</a>
                    <a href="#">Things I &#10084;</a>
                    <a href="#">Contact</a>
                </div>
            </div>
        </div>
    <div class="header">
        <div class="header-content">
            <h1>Oculus Rift<br>
                Next-generation Virtual Reality.</h1>
            <div class="mouse-icon" onclick="$('.section1').animatescroll();" style="cursor:pointer;">
                <div class="wheel"></div>
            </div>
        </div>
    </div>

    <div class="section1">
        Placeholder
    </div>

</body>
</html>

CSS:

/* BASICS */
@font-face {
    font-family: Neusa-SemiBold;
    src: url(fonts/neusa/Neusa-SemiBold.otf);
}

@font-face {
    font-family: Neusa-ExtraBold;
    src: url(fonts/neusa/Neusa-ExtraBold.otf);
}

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: auto;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

/* NAVBAR */
.navbar {
    width: 100%;
    height: 150px;
    position: fixed;
    z-index: 999;
    -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    -ms-transition: height 0.6s;
    -o-transition: height 0.6s;
    transition: height 0.6s;
}

#logo {
    width: 275px;
    height: 150px;
    background: transparent url(images/logo.png) no-repeat;
    background-size: contain;
    float: left;
}

.scroll #logo {
    background-image: url(images/logo2.png);
}

.nav {
    float: right;
    right: 0px;
}

.nav a {
    line-height: 75px;
    padding-left: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;    
    color: #ffffff;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

.nav a:hover {
    text-decoration: underline;
}

/* STICKY NAVBAR */

.navbar.scroll {
    background-color: #ffffff;
    height: 75px;
}

.navbar.scroll#logo {
    width: 140px;
    height: 140px;
    background: transparent url(images/logo2.png) left top no-repeat;
}

.navbar.scroll .nav a {
    color: #000000;
    line-height: 75px; }

/* SECTIONS */
.header {
    background: 
        linear-gradient(to top right,
            rgba(255, 65, 54, 0.5),
            rgba(24, 0, 255, 0.5)
        ),
        url(nieuws/VR/images/oculusrift.jpg) fixed;
    background-size: cover;
    height: 100vh;
    width: 100%;
}

.header-content {
    width: 80%;
    margin: auto;
}
.header-content h1 {
    font-family: 'Neusa-ExtraBold', sans-serif;
    text-transform: uppercase;
    font-size: 72px;
    color: #ffffff;
    text-align: right;
}

.section1 {
    margin-top: 20px;
    background-color: #f2f2f2;
    height: 500px;
}

/* MOUSE ICON */
.mouse-icon {
    border: 4px solid #ffffff;
    border-radius: 32px;
    height: 50px;
    width: 30px;
}

.mouse-icon .wheel {
    -webkit-animation-name: scrolling;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: scrolling;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.mouse-icon .wheel {
    border-radius: 10px;
    background: #ffffff;
    width: 6px;
    height: 10px;
    top: 4px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

@-webkit-keyframes scrolling    {
    0%   { top:5px;  opacity: 0;}
    30%  { top:10px; opacity: 1;}
    100% { top:25px; opacity: 0;}
}

@keyframes scrolling    {
    0%   { top:5px;  opacity: 0;}
    30%  { top:10px; opacity: 1;}
    100% { top:25px; opacity: 0;}
}

最佳答案

将“header-content”div 放入另一个类为“header-content-container”的 div 中，并添加以下 CSS:

.header-content-container {
      position: absolute;
      bottom: 0;
      width: 100%;
}

关于html - div内容对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39872233/

26 4 0
文章推荐： c++ - Geany 更好的语法突出显示
文章推荐： HTML 表单重叠图像横幅
文章推荐： c# - 删除按钮出现在？
文章推荐： html - 下拉元素箭头在单击时上下移动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com