时间戳

首页 > 解决方案 > HTML 正文溢出

html - HTML 正文溢出

问题描述

我正在尝试创建一个网站，其中第一部分是视频，顶部是导航栏和描述句。第二部分是一个带有图片和 lorem ipsum 段落的 div。但是这两部分是混在一起的。你知道为什么吗？

第一部分是视频容器 div。它包含一个视频、一个导航栏和一些介绍性文字

第二部分是介绍 div，它有一个图像和一个并排的段落

<style>
        html, 
        body {
            border: 1px solid blue;
            min-height:100%; 
            padding:0; 
            margin:0;}

        * {
            font-family: 'Playfair Display', serif;
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            margin-top: -5px;
        }
        .nav {
            border: 1px solid red;
            margin-right: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .nav li {
            list-style-type: none;
        }
        .nav li a {
            text-decoration: none;
            font-size: 23px;
            font-weight: 600;
            color: #C71585;
            letter-spacing: 0.03em;
        }
        .nav img {
            width: 150px;
        }
        video { 
            width: 100%;
            position: absolute;
            object-fit: cover;
            background-size: cover;
            top: 0px;
            left: 0px;
            min-width: 100%;
            min-height: 100%;
            z-index: -1;
            box-sizing: content-box;
        }
        .video-container {
            position: relative;
            height: 100%;
            border: 1px solid yellow;
        }
        .content {
            border: 1px solid yellow;
            position: absolute;
            left: 50px;
            top: 150px;
            margin: 10px;
            padding: 5px 20px;
            font-size: 20px;
            overflow: none;
        }
        .content h1 {
            font-size: 100px;
            color:  #C71585;
        }
        #myBtn {
            margin-left: 20px;
            margin-top: 40px;
            border: 1px solid #C71585;
            font-size: 26px;
            font-weight: 800;
            color: #e827a0;
            padding: 15px 60px;
            background-color: transparent;
            transition: 0.2s ease-in;
        }
        #myBtn:hover {
            background-color: rgba(199, 21, 133);
            color: white;
        }
        .intro {
            overflow: none;
            margin-top: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .intro img {
            width: 500px;
        }
        .intro-text {
            width: 30%;
        }

    </style>
</head>
<body>




        <div class="video-container"> 
                <video autoplay muted loop id="video">
                        <source src="video.mp4" type="video/mp4">
                </video>
            <div class="nav">
                <img src="logo.png" alt="logo">
                <li><a href="#">About me</a></li>
                <li><a href="#">My Portfolio</a></li>
                <li><a href="#">My resume</a></li>
                <li><a href="#">Contact me</a></li>
            </div>

            <div class="content">
                <h1>Avid learner and</h1>
                <h1>Constant striver</h1>
                <button id="myBtn">Who am I</button>
            </div>

        </div>

    <div class='intro'>
        <img src="01.jpeg" alt="">
        <div class="intro-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque ex a felis laoreet, ut bibendum sem eleifend. Quisque egestas sem sed velit molestie tincidunt. Phasellus at pellentesque odio. Phasellus sem leo, hendrerit et massa vehicula, iaculis cursus erat. Vestibulum et viverra nisi, sit amet condimentum sem. Duis gravida faucibus nisl nec pharetra. Curabitur convallis risus enim, nec semper lorem cursus varius. Quisque feugiat vitae dui non ultricies. Integer ipsum quam, dictum et quam nec, imperdiet euismod nulla. Nam bibendum sagittis orci, eget tincidunt risus luctus nec. Quisque lacus urna, tincidunt vel lobortis in, suscipit sit amet nunc. Fusce ultrices erat a nunc dignissim hendrerit. Maecenas sed pharetra quam, vitae suscipit nunc. Aenean molestie dui aliquet augue eleifend, quis congue ligula laoreet. Ut quis est pellentesque, fringilla odio ac, tincidunt nibh.
        </div>
    </div>
</body>

标签： htmlcssvideo

解决方案

您可以使用 css flex 属性，在您的情况下请添加

.flex-container {
     display: flex;
     flex-wrap: wrap;
}

在您的样式标签下并将此类分配给intro类 div as <div class='intro flex-container'>，这对您有用吗？

推荐阅读