我试图在横向移动屏幕尺寸上实现这一点，其他div不重叠。 我不能让div在彼此远离某个空间的地方。 这是我的代码：
/* Main Section */
html,
body {
margin: 0 auto;
padding: 0;
font-size: 14px;
width: auto;
height: auto;
}
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: visible;
z-index: -100;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}
.fullscreen-bg__video {
position: fixed;
top: 0;
left: 0;
}
@media (max-width: 1200px) {
.fullscreen-bg {
background: url('https://i.gyazo.com/fbb65627e5fe8a07b7d4b9d41db47e34.png') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
/* Navigation Bar */
.navbar {
background-color: transparent;
border-radius: none;
margin: 0 auto;
height: auto;
position: fixed;
padding-bottom: 50px;
}
@media screen and (max-device-width: 1200px) and (orientation: landscape) {
.navbar {
padding-bottom: 30px;
}
}
.navigation-main {
font-size: 28px;
font-weight: bold;
float: right;
margin-top: 25px;
margin-right: 30px;
list-style-type: none;
}
@media all and (max-width: 1000px) {
.navigation-main {
font-size: 28px;
}
}
.navigation-main li {
float: left;
margin-right: 20px;
}
.navigation-main li a {
color: DodgerBlue;
text-decoration: none;
font-family: "Lobster";
}
ul.nav li a:hover {
background-color: transparent;
}
.navigation-main ul {
display: block;
}
.navigation-main a.active {
color: lightgreen;
font-family: "Lobster";
font-size: 30px;
}
.main_nav {
padding-top: 10px;
}
.navigation-main a.donate {
box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
-o-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
background-color: #9ea517;
padding: 20px 18px!important;
color: #fff!important;
border-radius: 2px 2px 2px 2px;
font-family: 'Aclonica';
font-size: 28px;
letter-spacing: 1px!important;
}
.hvr-grow-rotate {
background-color: #9ea517;
}
img {
height: 80px;
}
@media only screen and (max-width: 1200px) {
img {
display: none;
}
}
/* NAVIGATION END!! */
/* Middle Section */
.main_mid {
color: white;
text-shadow: 10px 10px 10px black;
text-align: center;
font-family: "Luckiest Guy";
font-weight: 900;
margin: 0;
left: 0;
line-height: 200px;
margin: auto;
margin-top: -100px;
position: fixed;
top: 50%;
width: 100%;
font-size: 100px;
overflow: hidden;
}
@media all and (max-width: 1200px) {
.main_mid {
font-size: 90px;
}
}
.inner_mid {
color: white;
display: none;
text-shadow: 10px 10px 10px black;
text-align: center;
font-family: "Luckiest Guy";
overflow: hidden;
font-weight: 900;
margin: 0;
left: 0;
margin: auto;
margin-top: -100px;
position: fixed;
top: 50%;
width: 100%;
font-size: 100px;
}
@media all and (max-width: 1200px) {
.inner_mid {
font-size: 90px;
}
}
@media screen and (max-width: 1200px) and (orientation: landscape) {
.inner_mid {
margin-top: 0 auto;
}
}
.help_text {
position: fixed;
color: white;
display: none;
text-shadow: 10px 10px 10px black;
text-align: center;
font-family: "Luckiest Guy";
overflow: hidden;
font-weight: 900;
margin: 0;
left: 0;
margin: auto;
top: 60%;
width: 100%;
font-size: 50px;
}
@media all and (max-device-width: 1200px) and (orientation: landscape) {
.help_text {
line-height: 300px;
margin-top: -50px;
margin-bottom: 50px;
}
}
#button {
overflow: hidden;
top: 50%;
width: 100%;
display: none;
text-align: center;
margin-bottom: 50px;
vertical-align: middle;
background-color: transparent;
}
@media screen and (max-device-width: 1200px) {
#button {
padding-bottom: 35px;
}
}
.button:hover {
color: dodgerblue;
}
.button {
position: fixed;
box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
-o-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
background-color: orange;
padding: 20px 18px!important;
border-radius: 2px 2px 2px 2px;
font-family: 'Aclonica';
font-size: 28px;
letter-spacing: 1px!important;
}
@media all and (max-width: 800px) {
.button {
height: 50px;
width: 50px;
font-family: 'Aclonica';
}
}
a.button {
list-style-type: none;
text-decoration: none;
background-color: red;
}
a.button:hover {
color: black;
list-style-type: none;
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<title>BEMC | Home</title>
<head>
<!-- Links -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="B_hover.css">
<link rel="stylesheet" href="styles.css">
<!-- Bootstrap Links -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.5/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.3.5/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<!-- Random -->
<link rel="stylesheet" href="http://www.w3schools.com/w3css/w3.css">
<link rel="stylesheet" type="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.js">
<link rel="stylesheet" type="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.0.2/css/hover-min.css">
<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Fontdiner+Swanky|Slackey' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Montserrat|Black+Ops+One|Luckiest+Guy" rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet' type='text/css'>
</head>
<!-- bxSlider CSS file -->
<link href="/GalleryPlugins/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
// note that this doens't call hide
$('.inner_mid').delay(3000).fadeIn('slow');
$('#button').delay(3000).fadeIn('slow');
$('.help_text').delay(3000).fadeIn('slow');
});
</script>
<body>
<div class="fullscreen-bg">
<video loop muted autoplay poster="https://i.gyazo.com/fbb65627e5fe8a07b7d4b9d41db47e34.png" class="fullscreen-bg__video">
<source src="Timelapse_star_sky_FULLHD_Free_background_video_ef.webm" type="video/webm">
<source src="Timelapse_star_sky_FULLHD_Free_background_video_ef.mp4" type="video/mp4">
<source src="Timelapse_star_sky_FULLHD_Free_background_video_ef.ogg" type="video/ogg">
</video>
</div>
<nav class="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navigation-main nav navbar-right">
<li class="B_underline_left "><a href="# hvr-underline-from-center">Home</a>
</li>
<li class="active hvr-underline-from-center"><a href="Gallery.php">Gallery</a>
</li>
<li class="hvr-underline-from-center"><a href="contact.php">Contact Us</a>
</li>
<li class="hvr-underline-from-center"><a href="History.php">History</a>
</li>
<li><a class="donate hvr-grow-rotate hvr-shutter-out-vertical hvr-buzz hvr-pulse" href="">Donate</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="wrapper">
<p class="animated flash bounceOut main_mid">Gallery</p>
<p class="animated shake flash inner_mid">Coming Soon...</p>
<p class="help_text">Help us by donating!</p>
<div id="button">
<a href="#" class="button hvr-grow-rotate hvr-shutter-out-vertical hvr-buzz hvr-pulse" role="button">Donate</a>
</div>
</div>
</div>
</body>
<!-- bxSlider Javascript file -->
<script src="/GalleryPlugins/jquery.bxslider.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</html>
我错过了什么建议？ 这是我的JSFIDDLE＆gt; http://jsfiddle.net/57PQm/71/
答案 0 :(得分：0)
我建议你自己使用bootstrap CSS：用引导元素分隔你的div。您将获得不会在瞬间重叠的移动设备div。 （Bootstrap然后可以使用它的魔力）
然后，您可以使用这些课程组织div（基本示例）：
<div class="col-md-12">
<div class="col-md-4">
One
</div>
<div class="col-md-4">
Two
</div>
<div class="col-md-4">
Three
</div>
</div>
使用此作为参考： https://getbootstrap.com/examples/grid/ 或这个： https://bootstrapdocs.com 或这个： http://www.w3schools.com/bootstrap/
答案 1 :(得分：0)
通过将元素.main-mid，.inner-mid，.help-text和.button的位置从fixed更改为relative，我获得了良好的效果。
我认为这对你来说是一个很好的途径。
我还建议整理你的代码并使用bootstrap的网格系统，如wolfsatyr提到的。
答案 2 :(得分：0)
您需要将所有position: fixed;更改为position: relative;，以便在屏幕尺寸更改时可以调整大小。 fixed维护<div>代码的起始位置，可以从那里开始增长和缩小。因此，当您缩小到移动设备屏幕时，您拥有的文字大小会导致包含它们的<div>调整大小并与下一个<div>重叠。当您将position更改为relative时，<div>会按顺序排列，如果某些内容导致<div>调整大小，那么{{跟随它的1}}被调整并防止重叠。
您可以通过编辑过的小提琴看到它：http://jsfiddle.net/57PQm/78/