我心里只有一个目标:
“.hours”div 应居中并位于两个共享屏幕大小的 div(.phone 和 .mail)下方。
so effectively: .nav .phone / .mail .hours \\\\\.footer/////
但是:这是棘手的部分……它在 Atom 中显示正常。每当我尝试在 Chrome 中查看它时，它都会在 .phone 和 .mail 行之前放置 .hours ...
为什么？
注意:刚刚也在Safari中查看，同样报错。想法？
* {
margin:0;
font-family: 'Roboto', sans-serif;
}
.topWrapper{
position: fixed;
top:0;
z-index:10;
width: 100%;
}
.header{
/*border: 1px solid rgb(0,0,0);*/
text-align: left;
width: 100%;
background-color: white;
height:75px;
position: relative;
top:0px;
}
#title{
padding-left: 10px;
padding-top: 10px;
font-size: 50px;
}
#contactBox{
position:fixed;
right:20px;
top:20px;
width:100px;
height:40px;
background-color: black;
color:white;
}
/*CONTACT US BUTTON = FTEXT*/
.fText{
font-size: 15px;
padding: 10px;
}
.nav{
height:50px;
width:100%;
border: 1px solid rgb(200,200,200);
background-color: white;
}
#nBar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
li {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 15px 40px 10px 40px;
}
#home{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#bio{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#projects{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#contact{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#home:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
#bio:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
#projects:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
#contact:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
a{
text-decoration: none;
color:black;
}
/*body starts here*/
.contentWrap{
width:100%;
position:absolute;
top:135px;
z-index: 1;
}
.container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
min-width: 960px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.phone{
width:48%;
height: 350px;
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;
border-right: 1px solid rgb(200,200,200);
padding-left:10px;
/*padding-right: ;*/
}
.phone:hover{
background-color: rgb(208, 177, 202);
}
.phoneImg{
height:auto;
width:75%;
}
.mail{
width:47%;
height:350px;
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;
padding-left: 10px;
}
.mail:hover{
background-color: rgb(208, 177, 202);
}
.mailImg{
height:auto;
width:75%;
}
/*hours is the entire hours div*/
.hours{
width:100%;
-webkit-box-ordinal-group:3;
-ms-flex-order:2;
order:2;
padding-bottom: 50px;
}
/*title of hours*/
.textHours{
padding-top: 10px;
text-align: center;
font-size: 50px;
}
/*available times*/
.timewindow{
text-align: center;
padding-top: 10px;
font-size: 20px;
}
/*the explanation of the time*/
.timeExp{
text-align: center;
padding:10;
}
.footer{
text-align: center;
width:100%;
-webkit-box-ordinal-group:4;
-ms-flex-order:3;
order:3;
height:65px;
border-top: 1px solid rgb(200,200,200);
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Dockmann Web Services">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Paul A">
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styleContact.css" />
<script src="jquery-3.1.1.min.js"></script>
type="text/javascript" src="scriptContact.js"></script>
<title>dockmann</title>
</head>
<body>
<div class="topWrapper">
<div class="header">
<h1 id="title">DOCKMANN</h1>
<a href="mailto:"><div id="contactBox">
<p class="fText">
Contact Us!
</p>
</div>
</a>
</div>
<div class="nav">
<ul id="nBar">
<!--inserted .navigation because it will help
differentiate the nav bar links when I add
other "<a> links" along the page -->
<a class="navigation" href=""><li id="home">
HOME
</li></a>
<a class="navigation" href=""><li id="bio">
BIO
</li></a>
<a class="navigation" href=""><li id="projects">
PROJECTS
</li></a>
<a class="navigation" href=""><li id="contact">
CONTACT
</li>
</a>
</ul>
</div>
</div>
<!-- body starts here -->
<div class="contentWrap">
<div class="container">
<div class="phone">
<center>
<a class="phoneLink" href="tel:">
<img class="phoneImg" src="images/phone.png" /></a>
</center>
</div>
<div class="mail">
<center>
<a class="mailLink" href="mailto:">
<img class="mailImg" src="images/mail.png" /></a>
</center>
</div>
<div class="Hours">
<h1 class="textHours">HOURS:</h1>
<h5 class="timewindow">9:00 (EST) - 21:00 (EST)</h5>
<p class="timeExp">
We normally pick up our phones during this time window.
<br />
However, it is okay to call afterhours.
<br />
(All times shown are shown in local Miami time)
</p>
</div>
<div class="footer">
footer;
</div>
</div>
</div>
</body>
</html>最佳答案
类(class)区分大小写，您不小心将 class="Hours" 放在了 HTML 中。修复该问题，您将看到 CSS 应用。
关于html - 我的 ".hours"在 Chrome 中显示不正确。但是，在 Atom 中它显示正常。可能是什么问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41027098/