所以我是网络开发方面的新手，但我找不到解决我的问题的方法。 我有两个 div，当您将浏览器屏幕更改为最小尺寸或在移动设备上打开它时，我的两个 div 会重叠。 如果您将窗口缩小，这两个研究气泡就会重叠。 这是正在运行的网站: http://gwensume.com/RKLResearch.html
这里有很多代码对此感到抱歉...我尝试将 div 更改为相对而不是绝对但创建这些大白框..
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Richard K. Larson</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- RKL CSS -->
<link type="text/css" rel="stylesheet" href="RKL.css"/>
</head>
<body>
<!-- ### Header Begin ### -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="name hidden-xs">
<h1>Richard K. Larson</h1>
<h4>Professor, Linguistics</h4>
/div>
<div class="navbar-header">
<button type="button" class="navbar-toggle " data- toggle="collapse" data-target=".navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm hidden-md hidden-lg">Richard Larson</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right " role = "navigation">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="RKLResearch.html">Research</a></li>
<li class = "dropdown">
<a href="#" class = "dropdown-toggle" data-toggle = "dropdown" aria-expanded = "true"> Publications <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href="RKLArticles.html"> Articles </a></li>
<li><a href="RKLBooks.html"> Books </a></li>
<li><a href="RKLSoftware.html"> Software </a></li>
<li><a href="RKLPresentations.html"> Presentations </a></li>
<li><a href="RKLUnpublished.html"> Unpublished </a></li>
</ul>
</li>
<li><a href="RKLPJ.html">Port Jefferson</a></li>
<li><a href="RKLContact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="darkBG2 col-xs-9 col-sm-8 col-md-8 col-lg-8">
<h3>The Structure & Projection of DP:</h3>
<p>LOTS OF TEXT
</p>
</div>
<div class="darkBG3 col-xs-9 col-sm-8 col-md-8 col-lg-8">
<h3>The Comparative Grammar of Intensional Transitive Verbs: </h3>
<p>MORE TEXT!
</p>
<p>
EVEN MORE TEXT!
</p>
</div>
<div class="space"></div>
CSS:
html {
background: url(backgroundlyra.jpg) no-repeat center center fixed;
background-attachment: fixed;
background-size: cover;
position: relative;
min-height: 100%;
}
h1 {font-size: 4vw;}
h4 {margin-top: -10px;}
.navbar {
background-color: #B8B8B8;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
color: #CD5C5C;
opacity: .95;
position: fixed;
display: inline;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer p {
display: inline;
margin-right: 15px;
padding-top: 60px;
bottom: 0;
height: 60px;
width: 100%;
}
.navbar p {
margin-top: -10px;
font-size: 15px;
}
.darkBG {
background: #B8B8B8;
position: absolute;
top: 160px;
right: 50px;
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 10px;
margin-left: 50%;
}
.darkBG2 {
background: #B8B8B8;
position: absolute;
top: 20vh;
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 0 10px 10px 10px;
margin: 100px;
display: inline;
height: 30%;
}
.darkBG3 {
background: #B8B8B8;
position: absolute;
top: 55vh;
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 0 10px 10px 10px;
display: inline;
margin: 100px;
height: 60%;
}
img {
margin-left: 4%;
top: 160px;
float: left;
position: absolute;
border-radius: 10px;
max-width: 100%;
height: 21vh;
width: 21vw;
}
.navbar-brand {
color: #CD5C5C;
}
.space {
opacity: 0;
}
最佳答案
您已经为 div 指定了绝对位置。这就是 Bootstrap 无法正确排列它们的原因。删除类 darkBG2、darkBG3 的 div 中的 position:absolute; 以解决此问题。 position
.darkBG2 {
background: #B8B8B8;
/* position: absolute; */
/* top: 20vh; */
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 0 10px 10px 10px;
margin-left: 15vw;
margin-bottom: 20vh;}
.darkBG3 {
background: #B8B8B8;
/* position: absolute; */
/* top: 55vh; */
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 0 10px 10px 10px;
margin-left: 15vw;
}
进行这些更改后，您会看到两个问题。
修复背景变化
body{
background:transparent;
}
修复导航栏覆盖内容的问题
.container{
margin-top: 40vh;
}
关于html - 浏览器大小改变时 Div 重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29460769/