Question

我认为我的div标签与其他标签不匹配，但我一次又一次检查它不是。这有点奇怪。我无法理解为什么内容到处都是，我在导航后和内容之后的顶部都有白点。

这就是我得到的

黄色包裹我尝试使用

margin:0; padding:0;height:100%; width:100%;

但它不起作用。

我尝试使用overflow: hidden的差距它工作，但它不适合我的导航。宽度仍然溢出，但我看不到角落（意思是隐藏它）。

顺便说一句，我使用bootstrap并试图修改一些em。它适用于任何桌面的桌面大小。但当我转向移动设备（iPhone 5方向：potrait）时，它出错了。

请帮助，我不知道发生了什么。我所知道的 margin:0; padding:0;height:100%; width:100%;是魔术。但不是。

/* About Us */
#aboutus{
	position:relative;
	background:#ffff00;
	width:auto;
	height:auto;
	margin:0;
	padding:0;
	}
.aboutus{
	position:relative;
	margin-top:80px;
	height:auto}
.aboutus > h1 {
	padding:0 5%;
	letter-spacing:5px;
}
.aboutusleft, .aboutusright{
	height:auto;
	padding:0 5% 0% 5%;
}
.aboutus h2{
	letter-spacing:4px;
	padding:5% 5% 1% 5%;}
.aboutus h3{
	letter-spacing:1px;
	line-height:1.5;
}
.aboutus h3:first-child{
	position:relative;
	margin-bottom:100px;
	z-index:90;
}	
.aboutuspitch{
	position:absolute;
	right:2%;
	top:100%;
	text-align:right;
	width:50%;
	transform:translate(-2%, -50%);
	z-index:88;
}
.aboutuspitch img{
		width:80%;
}
.ourteam{
	background:url(../touchupAssets/about/Background1.png);
	background-size:100% 100%;
	height:100%;
	position:relative;
	z-index:1;
	}
.ourteamContent img{
	width:100%;
}
.ourteamContent > h1{
	letter-spacing:8px;
}

#ourteamRight{
	position:absolute;
	top:50%;
	right:0;
	padding-right:5%;
	padding-left:0;
	transform:translate(0,-50%);
	line-height:1.5;
	letter-spacing:2px;
}
.profileBack:first-child{
	background:none;
}
#wrapProfileBack{
	margin-top:-20%;
}
.psycholog{
	padding:0;
	margin-top:-2%;
	min-height:50vh;
	}
.abouttitle{
	padding:25px 100px;
	letter-spacing:5px;
	}
.associates{
	margin-top:-2%;
	padding-bottom:5%;
	background:url(../assets/BG_3.png);
	background-size:100% 100%;
	min-height:50vh;	
	}

.profile{
	height:100%;
	width:75%;
	position:relative;
	left:50%;
	transform:translateX(-50%);
}

.profilecontent{
	padding:5% 0;
	width:75%;
	float:none;
	position:relative;
	margin:0 auto;
}
.profilepict, .profiletext{
			}
.profiletext{
	padding:0;
}
.profiletext > h2 {
	letter-spacing:5px;
}
.psytitle{
	margin-bottom:50px;
	font-weight:bold;
}
.profiletext > h3{
	padding-right:15%;
	letter-spacing:2px;
	line-height:1.5;
	font-size:21px;
}
.profilepict{
	margin-top:-15%;
	display:flex;
    justify-content:center;
    align-items:flex-start;
	align-self:flex-start;
	padding:0;
}
.profilepict img{
	   width:150%;
		height:100%;
}

.profileBack:nth-child(odd){
	position:relative;
	z-index:22;
	margin-top:-8%;
	max-height:100%;
}
.profileBack:nth-child(even){
	position:relative;
	margin-top:-8%;
	max-height:100%;
	z-index:20;
}
.profileBack:nth-child(odd):nth-child(3n+1){
background:url(../touchupAssets/about/CyanBackground.png);
	background-size:100% 100%;
	}
.profileBack:nth-child(even):nth-child(3n+2){
	background:#f61a7c;
	background-size:100% 100%;
	}
.profileBack:nth-child(odd):nth-child(3n+3){
background:url(../touchupAssets/about/YellowBackground.png);
	background-size:100% 100%;
	}
.profileBack:nth-child(even):nth-child(3n+4){
	background:#99ffff;
	background-size:100% 100%;
	}
.profileBack:nth-child(odd):nth-child(3n+5){
background:url(../touchupAssets/about/MagentaBackground.png);
	background-size:100% 100%;
	}
.profileBack:nth-child(even):nth-child(3n+6){
	background:#ffff00;
	background-size:100% 100%;
	}	

div.profileBack:nth-child(odd) .profiletext {
	float:right;
	position:absolute;
	top:0;
	right:0;
	display:flex;
	height:100%;
	align-items:flex-start;
	justify-content:center;
	flex-direction:column;
   }
div.profileBack:nth-child(odd) .profilepict {
	float:right;
	padding:0;
	margin-top:0;
	position:absolute;
	top:0;
	left0;
	display:flex;
    justify-content:center;
    align-items:flex-start;
	align-self:flex-start;
}
div.profileBack:nth-child(odd) .profiletext >h2{
	padding-left:20%;
}   
div.profileBack:nth-child(odd) .profiletext >h3{
	padding-left:20%;
	padding-right:0;
}

div.profileBack:nth-child(even) .profiletext{
	float:left;
	position:absolute;
	top:0;
	left:0;
	display:flex;
	height:100%;
	align-items:flex-start;
	justify-content:center;
	flex-direction:column;

}
div.profileBack:nth-child(even) .profilepict{
	float:left;
	padding:0;
	margin-top:0;
	top:0;
	right:0;
	position:absolute;
	display:flex;
    justify-content:center;
    align-items:flex-start;
	align-self:flex-start;
}
.devteam{
	position:relative;
	z-index:21;
	background:#fff;
	background-size:100% 100%;
	min-height:100%;
	margin-top:-8%;
	padding-top:8%;
	text-align:center;
	}
	
.teamimg{
	height:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	}
.teamimgdmg img{
	width:100%;
}
@media screen and (max-width: 773px) {
/*About Us*/
#aboutus{
	position:relative;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
  .aboutus{
  margin-top:50px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
include 'core/init.php';
include 'core/function/profile.php';

?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>About Us</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css">
    <!-- custom -->
    <link rel="stylesheet" type="text/css" href="style/navigation.css">

    <link rel="stylesheet" type="text/css" href="style/main.css">
    <link rel="stylesheet" type="text/css" href="style/laptop.css">
    <link rel="stylesheet" type="text/css" href="style/mobile.css">

</head>
<body>

            <header class="navigation nav-down">
<nav class="clearfix">
    <ul class="clearfix">
      <li class="col-md-2 col-sm-12 col-xs-12 navHome"><a href="index.php"><img src="assets/logo_PG.png" /></a></li>
      <li id="currentnav" class="col-md-1 col-sm-12 col-xs-12"><a href="aboutus.php">ABOUT US</a></li>
      <li class="col-md-1 col-sm-12 col-xs-12"><a href="ourservices.php">OUR SERVICES</a></li>
		<li class="col-md-1 col-sm-12 col-xs-12"><a href="journals.php">EVENTS</a></li>
		<li class="col-md-1 col-sm-12 col-xs-12"><a href="articles.php">ARTICLES</a></li>
      <li class="col-md-1 col-sm-12 col-xs-12"><a href="news.php">NEWS</a></li>
      <li class="col-md-1 col-sm-12 col-xs-12"><a href="contactus.php">CONTACT US</a></li>  
    </ul>
    <a href="#" id="pull">text</a>
</nav>
            </header>
            
      <div id="aboutus">
      		<div class="aboutus row">
<h1>ABOUT US</h1><br>
            
<div class="aboutusleft col-lg-6 col-sm-12 col-xs-12">
<h3>
text</h3>
</div>
<div class="aboutusright col-lg-6 col-sm-12 col-xs-12">
<h3>
text</h3></div>

  <div class="aboutuspitch">
			<img src="touchupAssets/about/tagline.png">
	</div>
            </div>
            <div class="ourteam row">
<div id="ourteamLeft" class="ourteamContent col-md-8 col-lg-8 col-sm-12">
	<img src="touchupAssets/about/PhotoTeam.png">
</div>
<div id="ourteamRight" class="ourteamContent col-md-4 col-lg-4 col-sm-12"><h3>
text</h3>
</div>
 </div>
  <div class="psycholog container-fluid">
 <div class="abouttitle row">
      <h1> PYSCHOLOGISTS</h1>
  </div>
	<div class="profilecontent container">
<div class="row asd">  
<div class="profiletext col-xs-8">text</div>
<div class="profilepict col-xs-4">					<img src="images/profilePicture/iBuRatih.png">
</div>
</div>
</div>
<div id="wrapProfileBack">					
<?php
while($profile = mysql_fetch_array($psychologQuery)){
?>                  
<div class="row profileBack">  
    <div class="row profile">
    <div class="profiletext col-xs-8">
	<h2><?php echo $profile['psycholog_name']?></h2>   <h3><?php echo $profile['psycholog_title'];?></h3>
<h2><?php echo $profile['specialist']?></h2>
<h3><?php echo $profile['displayDescription'];?></h3>
	</div>						   
<div class="profilepict col-xs-4 ">
<img src="images/profilePicture/<?php  echo $profile['image'];?>">
   </div>
 <span style="clear:both"></span>
        </div>
</div>			
<?php
}
?>

</div>
                    
            </div>

            <div class="devteam row">
            		<div class="abouttitle row">
                    <h1>
                    DEVELOPMENT TEAM
                    </h1>
                </div>
					<div class="row teamimg">
						<div class="col-xs-2 teamimgdmg"><img src="touchupAssets/about/Account.png"></div>
						<div class="col-xs-2 teamimgdmg"><img src="touchupAssets/about/Content.png"></div>
						<div class="col-xs-2 teamimgdmg"><img src="touchupAssets/about/Creative.png"></div>
						<div class="col-xs-2 teamimgdmg"><img src="touchupAssets/about/Media.png"></div>
						<div class="col-xs-2 teamimgdmg"><img src="touchupAssets/about/Research.png"></div>
					</div>
      </div>      
<div style="clear:both"></div>      
</div>    
</body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="style/bootstrap/js/bootstrap.min.js"></script>
    <!-- custom -->
     <script src="style/navigation.js"></script>
	 
</html>

Answer 1

最后我得到了@MostafaBaezid的答案给我一点线索。

这就是我在mobile.css中所做的。

#aboutus{
    position:relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow-X:hidden;
}
.aboutus{
    margin-top:50px;
}

它改变了一切。但很难相信。它只是溢出和边缘顶部。愚蠢地使div＃aboutus 100％宽度和高度，但它的工作原理。

设备大小Bootstrap CSS内容越过换行符

1 个答案: