Question

我实际上有一个目标：

“.hours”div应居中并低于两个div（.phone和.mail），它们共享屏幕大小。

* {
  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);
}

但是：这是一个棘手的部分......它在Atom中表现得很好。每当我尝试在Chrome中看到它时，它会将.hours放在.phone和.mail行之前......

为什么？

注意：只需在Safari中查看，也会显示相同的错误。想法？

<!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>

invokedAny()

Answer 1

类是区分大小写的，您不小心将class="Hours"放在了HTML中。修复此问题，您将看到CSS适用。

我的“.hours”在Chrome中显得格格不入。然而，在Atom它显示罚款。可能是什么问题？

1 个答案: