Javascript 调整大小时将Div元素推出页面
我试图把我的视频和它的标题放在我的页面中心,把我的徽标放在左上角。这是很好的,直到调整大小,当徽标被推出页面时,就好像中间有一个元素覆盖了我的标志元素。我尝试过解决哪个元素会这样做的问题:我当然怀疑它是视频容器,我尝试过许多方法来更改其设置,但迄今为止都没有成功(绝对宽度较小,左浮动等) 我是CSS的新手,非常感谢您的帮助!我也意识到使用绝对位置并不是一个好的做法——它现在只是在某种程度上让事情运转起来 我的代码: html:Javascript 调整大小时将Div元素推出页面,javascript,html,css,Javascript,Html,Css,我试图把我的视频和它的标题放在我的页面中心,把我的徽标放在左上角。这是很好的,直到调整大小,当徽标被推出页面时,就好像中间有一个元素覆盖了我的标志元素。我尝试过解决哪个元素会这样做的问题:我当然怀疑它是视频容器,我尝试过许多方法来更改其设置,但迄今为止都没有成功(绝对宽度较小,左浮动等) 我是CSS的新手,非常感谢您的帮助!我也意识到使用绝对位置并不是一个好的做法——它现在只是在某种程度上让事情运转起来 我的代码: html: 有少数最小宽度:100%您使用最小宽度(最小全宽)有什么原因吗?是的
有少数<代码>最小宽度:100%您使用最小宽度(最小全宽)有什么原因吗?是的,我试着测试这是否可以防止徽标被挤压,但没有效果!最好在
max width:100%中更改它代码>一些要查找的内容:左侧:…%
将元素推到右侧。使用水平边距可能会将图元推到视图之外。display:inline块
在元素的右侧提供了额外的空间。
<!DOCTYPE html>
<html>
<head>
<title>Broadcaster</title>
<meta charset="UTF-8" />
<link href="/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yatra+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=BioRhyme&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/2.0.1/tf.min.js"></script>
</head>
<body>
<div class="video-container">
<video playsinline autoplay muted width="400" height="400" id="webcam"></video>
<p id="caption"></p>
</div>
<input type="button" onclick="location.href='archive.html';" value="Archive" />
<input type="submit" onclick="location.href='about.html';" value="About"/>
<div class="logo">
<div id="icon">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="logotext"></div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/broadcast.js"></script>
</body>
</html>
html,
html {
height: 100%;
}
* {
box-sizing: border-box;
}
body {
background-color: #FFE4E1;
background: linear-gradient(#FFE4E1, thistle);
margin: 0;
height: 100%;
width:100%;
background-attachment: fixed;
}
header {
text-align: center;
}
main {
min-height: 80vh;
width: 10%;
}
h1 {
font-family: 'Messapia-Bold', serif;
position: absolute;
top: 5%;
left: 50%;
transform: translateY(-5%);
transform: translateX(-50%);
}
.video-container {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
.video-container video {
width: 40%;
height: 40%;
min-height: 224px;
max-height: 600px;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
display: block;
}
.video-container #caption {
display: block;
position: absolute;
top: 76%;
left: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
font-family: 'Messapia-Bold', serif;
font-size: small;
}
input[type=button] {
font-family: 'Messapia-Bold', serif;
font-size: small;
background-color: black;
border: none;
color: white;
padding: 8px 8px;
text-decoration: none;
cursor: pointer;
max-width: 90px;
width: 100%;
position: absolute;
top: 50%;
right:3%;
text-align: center;
}
input[type=submit] {
font-family: 'Messapia-Bold', serif;
font-size: small;
background-color: black;
border: none;
color: white;
padding: 8px 8px;
text-decoration: none;
cursor: pointer;
max-width: 90px;
width: 100%;
position: absolute;
top: 50%;
left:3%;
text-align: center;
}
input[type=back] {
font-family: 'Messapia-Bold', serif;
font-size: small;
background-color: black;
border: none;
color: white;
padding: 8px 8px;
text-decoration: none;
cursor: pointer;
max-width: 90px;
width: 100%;
position: absolute;
top: 19%;
left:3%;
text-align: center;
}
.text {
background-color: white;
position: absolute;
top: 30%;
display: flex;
flex-wrap: wrap;
font-family: 'Vollkorn', serif;
}
.text p{
text-align: center;
padding: 0 26%;
font-family: 'Vollkorn', serif;
font-size: x-large;
}
@font-face {
font-family: "Messapia-Bold";
src: url("font/Messapia-Bold.woff2") format ("woff2"),
src: url("font/Messapia-Bold.woff") format ("woff");
}
.logo{
min-width: 11%;
min-height: 11%;
margin:1em 0em;
position: absolute;
top: 1%;
left: 1%;
display: block;
overflow: visible;
/*transform: translate(-50%, -50%);*/
}
#icon{
position: absolute;
min-width:100%;
min-height:100%;
margin:1em 0em;
overflow: visible;
}
#icon > *{
display: inline-block;
position: absolute;
overflow: visible;
}
#icon div span{
display:none;
}
#logotext{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_transparent.svg) ;
background-size: cover;
background-position: right;
overflow: visible;
}
#box1{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_upperbox.svg) ;
background-size: cover;
background-position: right;
animation-name: stretch1;
animation-timing-function: ease-out;
animation-duration: 2s;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
transform-origin: 97% 50%;
overflow: visible;
}
#box2{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_midbox.svg) ;
background-size: cover;
background-position: right;
overflow: visible;
}
#box3{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_lowestbox.svg) ;
background-size: cover;
background-position: right;
animation-name: stretch3;
animation-duration: 1.3s;
animation-timing-function: ease-out;
animation-delay: 4s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
transform-origin: 97% 50%;
overflow: visible;
}
@keyframes stretch1 {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
@keyframes stretch2 {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
@keyframes stretch3 {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.row {
position: absolute;
top: 30%;
display: flex;
flex-wrap: wrap;
padding: 0 6px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 6px;
}
.column img {
opacity: 1;
margin-top: 12px;
vertical-align: middle;
width: 100%;
}
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}