定位 Div 和视频

问题描述

我正在尝试创建一个网站，以尝试到目前为止我对 html 和 css 的了解（自我思考，所以还不是最好的 :D）。 所以正如标题所说 - 我正在努力将我的 div 设置为相同的高度（#about），而且我的 #about 与视频的宽度不同（我一直试图将其设置为英雄）。

!-- 英雄 -->

            <div id="hero">
                <video autoplay muted loop id="myvideo">
                    <source src="video.mp4" type="video/mp4">
                </video>
                    <div class="content">
                 <p class="hero_text"><h1 id="kaszynski">Piotr<br>Kaszynski</h1>
                    Physical Theraphy <br> in Motion.</p> 
                    <button id="appointment">
                        <p>Book an appointment</p>
                    </button>
                    </div>
            </div>

h1#kaszynski {
    font-family: 'Poppins',sans-serif;
}

#hero {
    width: 100%;
    height: auto;
}

#myvideo {
    position: fixed;
    width: 100%;
    height: auto;
    z-index: -1;
    margin-top: -260px;
    filter: blur(3px);
    -webkit-filter: blur(3px);
}

.content {
    position: center;
    text-align: center;
    bottom: 0;
    width: 100%;
    padding: 20px;
    margin-top: 50px;
    z-index: 100;
}



div.content {
    margin-top: 200px;
    color: whitesmoke;
    font-size: 20px;
}

这里是div的

    <!-- about -->
                <div id="about"> 
                    <img src="img/tak.jpg" class="piotr" height="632px" width="456px">
                    <div class="aboutinfo">
                        <h2>ABOUT</h2>
                        <hr> <br>
                        <div class="about_content">
                            <article class="acontent">
                                My name is Piotr Kaszynski. I am 47 yerars old.
                                I was born and raised in the lower silesian area in Poland. <br> <br>
‍

                            From early years,I have always been interested in varoius
                            sports disciplines - therfore I went to academy of physical <br>
                            sport education and completed physiotherapy department. For 
                            the past 25 years I am helping people who struggled with their <br>
                            physical health such as: spine,shoulders,knees etc. I have
                            worked in varIoUs different places and worked with varIoUs 
                            groups of <br> people - starting with newborns and ending with elderely people.
                            </article>
                        </div>

                    </div>
                </div>

    /* ABOUT */

#about {
    width: 100%;
    height: 768px;
    background-color: #b9bbba;
    margin-top: 260px;
}

#jpgp {
    width: 456px;
    height: 632px;
    background-image: url(img/tak.jpg);
    display: inline-block;
}

.piotr {
    margin-top: -70px;
    margin-left: 460px;
}

.aboutinfo {
    margin-left: 35px;
    margin-top: -100px;
    background-color: #e9e9e9;
    padding: 10px;
    position: relative;
}


article.acontent {
    width: 456px;
    height: 232px;
    text-align: left;
    padding: 0;
}

div.aboutinfo {
    display: inline-block;
}

#about_content {
    width: 456px;
    height: 632px;
}

hr {
    width: 85px;
    background-color: yellowgreen;
    border: none;
    height: 2px;
    float: left;
    margin-top: -23px;
}

对于“混乱的代码”，我深表歉意，但正如我所说，我对这种东西很陌生：D。

这是我网站的 FHD 和 4K 图片 https://imgur.com/a/1kC76aR

谢谢你们:)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）