Question

我正在尝试将内容集中在浏览器中，而不用拉伸div并移动视频。.
当我拉伸浏览器时，它会四处移动图像和对象。
我想将对象保留在divs中并使所有内容保持在原位。是否可以仅使用CSS还是必须使用flexbox和java？
我已经发布了发生了什么的图像，这是所有代码的代码。
我确定它需要清除一些代码。.

body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat; 
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;  
}

main {
background: #333333;
width:90%;
height:660px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
  
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:left;
width: 20%;
height: 96%;
margin:0px;
padding: 10px 20px;
border: 2px solid black;
border-radius: 5px;
}

.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:right;
width: 20%;
height: 96%;
margin:0px;
padding: 10px 20px;
border: 2px solid black;
border-radius: 5px;
}

.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 96%;
margin:auto;
padding: 10px;
border: 2px solid black;
border-radius: 5px;
}


.mnu { overflow:hidden; background-color:#F8F8F8; padding:2px; line-height:1.5em; cursor:pointer; }
.mnu a { display:block; cursor:pointer; width:100%; padding:0 2px 0 1px; margin:0; }
.mnu a:link { color:#000000; text-decoration:none; }
.mnu a:visited { color:#000000; text-decoration:none; }
.mnu a:hover { color:#000000; text-decoration:none; background-color:#F0F0F0; }
.mnu a:active { color:#000000; text-decoration:none; background-color:#EAEAEA; }
.fil { position:absolute; left:0; top:0; width:100%; height:100%; }
.ptr { cursor:pointer; }
.opr { filter:alpha(opacity=100); }
.trn { opacity:0; filter:alpha(opacity=0); }
.smf { -ms-interpolation-mode:bicubic; }
.sol { background-color:blue; }
.bmk { border-style:dashed; border-width:0 0 1px 0; }
.ctr { position:relative; margin-left:auto; margin-right:auto; text-align:left; }
.ctt { text-align:center; }
.abs { position:absolute; }
.aut { overflow:auto; }
.hid { overflow:hidden; }
.scr { overflow:scroll; }
.vis { overflow:visible; }
.inv { visibility:hidden; }
.cms { }
.col { background-color:transparent; clear:left; float:left; }
.cor { background-color:transparent; clear:right; float:right; }
.required { }
.nvo { }
.bgremove { background-image:none; }

.nml { }
.hd1,h1 { font-family:Times New Roman, Times, serif; font-style:italic; font-size:18px; text-align:center; }
.hd2,h2 { font-family:Times New Roman, Times, serif; font-style:italic; font-size:15px; }
.hd3,h3 { font-weight:bold; }
.mnus { padding:0px; border-width:2px; border-style:outset; background-color:#CEE5F2; text-align:center; }
.mnus a:hover { color:#FFFFFF; background-color:#000080; }
.mnus a:active { color:#FFFFFF; background-color:#0000CC; }
.pnl { border-width:1px; border-style:solid; border-color:#8DC7EB; background-color:#CEE5F2; }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="created" content="Tue, 19 Feb 2019 02:15:52 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
	<link rel="stylesheet" href="style.css">
    <title></title>
    
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>

<main>
  <div class="divl">Music<br> Here Is A List Of Music</div>
  <div class="divr">Producers<br> Here Is A List Of Producers</div>
  <div class="divc">Videos<br><div id="lays581qvlpb">
<div id="pict581wjphg" class="hid abs" style="left:1199px; top:300px; width:100px; height:100px;"
 onclick="document.getElementById('lays585jmqnb').style.visibility='visible';
document.getElementById('lays585mobib').style.visibility='hidden';
document.getElementById('lays585cwgno').style.visibility='hidden';
document.getElementById('lays585tvnws').style.visibility='hidden';">
<img id="pict581wjphgi" class="fil smf" src="img-1.png" alt="">
</div>
<div id="pict581nqvmq" class="hid abs" style="left:1199px; top:399px; width:100px; height:100px;"
 onclick="document.getElementById('lays585jmqnb').style.visibility='hidden';
document.getElementById('lays585mobib').style.visibility='visible';
document.getElementById('lays585cwgno').style.visibility='hidden';
document.getElementById('lays585tvnws').style.visibility='hidden';">
<img id="pict581nqvmqi" class="fil smf" src="img-2.png" alt="">
</div>
<div id="pict583yfwki" class="hid abs" style="left:1199px; top:498px; width:100px; height:100px;"
 onclick="document.getElementById('lays585jmqnb').style.visibility='hidden';
document.getElementById('lays585mobib').style.visibility='hidden';
document.getElementById('lays585cwgno').style.visibility='visible';
document.getElementById('lays585tvnws').style.visibility='hidden';">
<img id="pict583yfwkii" class="fil smf" src="img-1.png" alt="">
</div>
<div id="pict583fdwaz" class="hid abs" style="left:1199px; top:597px; width:100px; height:100px;"
 onclick="document.getElementById('lays585jmqnb').style.visibility='hidden';
document.getElementById('lays585mobib').style.visibility='hidden';
document.getElementById('lays585cwgno').style.visibility='hidden';
document.getElementById('lays585tvnws').style.visibility='visible';">
<img id="pict583fdwazi" class="fil smf" src="img-2.png" alt="">
</div>
</div>
<div id="lays585jmqnb">
<div id="ytub586qorjf" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
 border-style:solid; border-color:#808080;" border="0">
 <iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/Lzkbf9wrMcQ?hd=1
 " frameborder="0" allowfullscreen></iframe></div>
</div>
<div id="lays585mobib" style="visibility:hidden">
<div id="ytub586vzlff" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
 border-style:solid; border-color:#808080;" border="0">
 <iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/9SI2xE0ixws?hd=1
 " frameborder="0" allowfullscreen></iframe></div>
</div>
<div id="lays585cwgno" style="visibility:hidden">
<div id="ytub587seayk" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
 border-style:solid; border-color:#808080;" border="0">
 <iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/U5LgnJI1FfI?hd=1
 " frameborder="0" allowfullscreen></iframe></div>
</div>
<div id="lays585tvnws" style="visibility:hidden">
<div id="ytub587wsjnq" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
 border-style:solid; border-color:#808080;" border="0">
 <iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/C9jH6mK_wUg?hd=1
 " frameborder="0" allowfullscreen></iframe></div>
</div></div>
  </main>
  <div style="clear:both;"></div>
  </div>[![enter image description here][1]][1]
  </body>
</html>

将物体居中放置在不动的位置

0 个答案: