Html 引导重叠问题
引导重叠问题 每当我将我的网站调整为更小的尺寸时，我就会遇到内部div元素与其他div元素重叠的问题。我有这个网站的照片，你们可以在这之前和之后看到 调整大小之前： 调整大小后： 我的CSS代码：Html 引导重叠问题,html,css,Html,Css,引导重叠问题 每当我将我的网站调整为更小的尺寸时，我就会遇到内部div元素与其他div元素重叠的问题。我有这个网站的照片，你们可以在这之前和之后看到 调整大小之前： 调整大小后： 我的CSS代码： #logo{ text-align: center; padding-top: 100px; } #titleImage{ height: 900px; padding-top: 40px; background-size: cover; filte
#logo{
text-align: center;
padding-top: 100px;
}
#titleImage{
height: 900px;
padding-top: 40px;
background-size: cover;
filter: grayscale(30%);
-webkit-filter: grayscale(50%);
}
#logo img{
-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000000')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000000')";
padding-bottom: 60px;
}
@font-face{
font-family: "comicF";
src: url(../font/Kaushan.otf) format('truetype');
}
#navbar a{
font-size: 25px;
color: white;
font-family: comicF;
display: inline;
text-shadow: 10px 10px 5px white;
padding-right: 30px;
display: block;
text-align:center;
text-shadow: 1px 1px black;
text-decoration: none;
}
#navbar ul {
list-style-type: none;
margin:0 auto;
text-align:center;
padding-left: 0px;
}
#navbar li {
display: inline-block;
text-align: center;
}
.navbar-change {
padding: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
background: #000;
height: 90px;
}
#about{
height: 500px;
width: 100%;
background-size: cover;
filter: grayscale(40%);
-webkit-filter: grayscale(50%); /* For Webkit browsers */
}
#about div{
text-align: center;
padding-top: 30px;
font-family: normalA;
font-size: 30px;
background-color: rgba(60, 54, 53, .3);
height: 100%;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#about h1{
padding-top: 65px;
color: #FAE9C4;
font-size: 99px;
}
#about p{
padding-left: 30px;
padding-right: 30px;
font-family: normalA;
text-align: center;
font-size: 25px;
color: white;
}
#line1 {
border: 0;
height: 1px;
width: 70%;
background-image: linear-gradient(to right, rgba(75,63,54, 0), rgba(75,63,54, 0.75), rgba(75,63,54, 0));
}
#team{
padding-top: 25px;
background-color: white;
width: 100%;
height: 660px;
text-align: center;
}
#team p{
padding-top: 0px;
font-family: normal;
}
#team h{
padding-bottom: 0px;
margin-bottom: 0px;
/* color: #3C3635;*/
font-family: comicC;
}
.teamDiv{
padding-top: 35px;
border-radius: 25%;
text-align: center;
}
#infoGeneral{
padding-top: 30px;
width: 100%;
height: 280px;
/* background-color: #3C3635; */
background-color: #4D3F36;
/* #4b433b*/
font-size: 15px;
text-align: center;
border-bottom: 4px #FAE9C4 solid;
filter: grayscale(20%);
-webkit-filter: grayscale(20%);
}
#infoGeneral p{
font-family: normal;
border-top: 0px;
color: white;
font-size: 20px;
}
#infoGeneral p:first-of-type{
padding-top: 9px;
}
.underScoreInfoGeneral{
padding-top: 1px;
margin: 0 auto;
background-color: #FAE9C4;
width: 70px;
height: 4px;
}
.socialIcons{
padding-top: 10px;
}
#map { //gogle maps
width: 100%;
height: 350px;
}
#footer {
width: 100%;
height: 30px;
background-color: #3C3635;
}
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="css/aboutCSS.css" rel="stylesheet">
<link href="css/starter-template.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body >
<div class="container-fluid">
<div id="titleImage" style="background-image: url(img/coffeee.jpg);">
<div class="row">
<div id="logo" class="col-md-8 col-md-offset-2"><img src="img/logo_white.png" style="width:40%;" alt="Mountain View"></div>
<span style="font-size:2.5em; color: white; text-align: right;" class="glyphicon glyphicon-pencil col-md-1 col-md-offset-1" aria-hidden="true"></span>
</div> <!-- 1row -->
<div class="row">
<div id="navbar" class="col-md-12">
<ul>
<li><a href="index.jsp">Home</a></li>
<li><a href="about.jsp">About</a></li>
<li><a href="shop.jsp">Shop</a></li>
</ul><!-- NAVBAR-->
</div><!-- row -->
</div>
</div>
<!-- //////////////////////////////////////////////////////////////////////////////////-->
<div class="row" style="background-color: white; height: 300px;">
</div>
<div class="row">
<div id="about" style="background-image: url(img/coffee-beans.jpg);"><div><h1 style="font-family: comicF; font-size: 50px;">Lorem totem</h1>
<p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></div>
</div>
<div class="row">
<div id="team">
<h1 style="font-family: impactA; font-size: 45px; color: #4C3F37;">Our amazing team</h1><hr id="line1"/>
<div class="col-md-4 teamDiv" ><img src="img/woman3.jpg" class="img-circle" alt="" style="width:30%;">
<p style="font-size: 340%; padding-top: 15px; font-family: comicC; margin-bottom: 0px;">Lucy Luu</p ><p style="color: #4b433b;">Marketing Director</p>
<div class="socialIcons"><img src="img/facebook3.png" alt="" style="width:7%;">
<img src="img/twitter3.png" alt="" style="width:7%;">
<img src="img/linkedin3.png" alt="" style="width:7%;">
</div>
</div>
<div class="col-md-4 teamDiv"><img src="img/woman4.jpg" class="img-circle" alt="" style="width:30%;">
<p style="font-size: 340%; padding-top: 15px; font-family: comicC; margin-bottom: 0px;">Melissa Gunson</p ><p style="color: #4b433b;">Founder</p>
<div class="socialIcons"> <img src="img/facebook3.png" alt="" style="width:7%;">
<img src="img/twitter3.png" alt="" style="width:7%;">
<img src="img/linkedin3.png" alt="" style="width:7%;">
</div>
</div>
<div class="col-md-4 teamDiv"><img src="img/man1.jpg" class="img-circle" alt="" style="width:30%;">
<p style="font-size: 340%; padding-top: 15px; font-family: comicC; margin-bottom: 0px;">James Hutson</p><p style="color: #4b433b;">Store Manager</p>
<div class="socialIcons"><img src="img/facebook3.png" alt="" style="width:7%;">
<img src="img/twitter3.png" alt="" style="width:7%;">
<img src="img/linkedin3.png" alt="" style="width:7%;">
</div>
</div>
</div>
</div><!-- row -->
<div class="row">
<div id="infoGeneral">
<div class="col-md-4">
<div><img src="img/Bhome.png" alt="" style="width:60px; text-align: center;"></div>
<h1 style="color: white; font-family: comicF; font-size: 43px; margin-bottom: 0px;">Location</h1>
<p>252 E Market St</p>
<p>Louisville, KY 40202</p>
<div class="underScoreInfoGeneral"></div>
</div>
<div class="col-md-4">
<div><img src="img/Bdata.png" alt="" style="width:60px; text-align: center;"></div>
<h2 style="color: white; font-family: comicF; font-size: 43px; margin-bottom: 0px;">Opening Times</h2>
<p>Monday - Saturday: 8:00 - 21:00</p>
<p>Sunday: closed</p>
<div class="underScoreInfoGeneral"></div>
</div>
<div class="col-md-4">
<div><img src="img/Bworldwide.png" alt="" style="width:60px; text-align: center;"></div>
<h2 style="color: white; font-family: comicF; font-size: 43px; margin-bottom: 0px;">Contact</h2>
<p><img src="img/letter106.png" alt="" style="width:25px; padding-right: 4px;"> jameshutson@gmail.com</p>
<p><img src="img/telephone5.png" alt="" style="width:25px; padding-right: 4px;"> 502 936 7664</p>
<div class="underScoreInfoGeneral"></div>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-12" id="map"></div>
</div>
<div class="row">
<div id="footer"></div>
</div>
</div><!-- container-->
<script src="js/map.js"></script>
<script src="js/navbar.js"></script>
</body>
</html>
关于
传说图腾
rem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行。
我们令人惊叹的团队
Lucy Luu市场总监
梅丽莎·冈森（Melissa Gunson）创始人
詹姆斯·哈特森商店经理
位置
E市场街252号
肯塔基州路易斯维尔，邮编：40202
开放时间
周一至周六：8:00-21:00
星期日：休息
接触
jameshutson@gmail.com
502 936 7664
我将非常感谢您的帮助。您想要实现什么样的布局，刚性的还是流动的？如果您担心div位于准确的位置，那么使用em听起来像是您的解决方案。 比如说
#关于p{
左：10em；
右边填充：10em；
字体系列：normalA；
文本对齐：居中；
字体大小：25px；
颜色：白色；
}这将允许您的div根据窗口的大小更加动态，同时设置最小宽度将防止div内容溢出，否则，您可以将溢出设置为隐藏，它将消失，或将其设置为滚动，这将强制用户滚动以查看其余内容，但将允许您更好地控制物品的放置方式。您需要从CSS中的#infoGeneral中删除高度属性。从屏幕截图的外观来看，您的部分没有重叠，但是您的CSS正在切断内容。你的div有很多固定高度，但你的内容似乎更高，因此被切断。如果删除固定高度，则其流动性会更好您可以使用
@media