个人中心
gpt4 book ai didi

html - 浏览器大小改变时 Div 重叠

转载 作者：太空宇宙 更新时间：2023-11-04 12:04:51 25 4
gpt4 key购买 nike

所以我是网络开发方面的新手，但我找不到解决我的问题的方法。我有两个 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/

25 4 0
文章推荐： java - 生成 WebService 工件时遇到问题
文章推荐： java - 45000 毫秒后，Selenium Web 驱动程序 : Unable to connect to host 127. 0.0.1 在端口 7055 上。 Firefox 控制台输出:ce6fd}
文章推荐： java - JAXRS 资源中的 Jersey CDI 注入(inject)
文章推荐： java - fatal error : 'com.ibm.xtq.commons.utils.wrappedruntimeexception : the root element is required ina well formed document'
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com