我正在使用HTML和CSS在一个练习网站上工作，我遇到了一个问题，我在一组4个div的底部有2个div，这些div没有应用任何css值。更奇怪的是，当我使用chrome中的开发工具来查看它们时，它们不会在检查模式中突出显示，而是在它们上面的内容div。
HTML：
<!DOCTYPE HTML>
<html>
<head>
<title>A Very Goochy Site</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<Meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<div id="header">
<header>
<img src="img/Abigail_Max_small.jpg" alt="Placeholder for logo">
<div id="linksOnly">
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="portfolio.html">Portfolio</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
<div id="content">
<h1>Gooch Website</h1>
<div id="intro">
<img src="http://baconmockup.com/750/200" alt="Placeholder Image" id="mainImage">
<p>Bacon ipsum dolor amet drumstick ham hock short ribs ribeye, filet mignon boudin pork loin tail. Burgdoggen cupim venison, doner tail corned beef bacon alcatra kevin. Ham hock frankfurter t-bone ground round rump chuck pork shank landjaeger. Shank tri-tip burgdoggen, strip steak turducken filet mignon cow ham corned beef. Pork belly swine chuck ham hock doner jowl cow sausage chicken beef ribs. Ground round jerky meatloaf ham hock doner ham. Burgdoggen cow capicola swine venison bresaola brisket spare ribs.</p>
</div>
<div id="why">
<img src="img/editor.svg" alt="Editor" class="section-icon">
<h2>Why you need a professional website</h2>
<h3>First impressions are everything.</h3>
<p>Your website is the first impression most people will get of your business. With an ever-increasing availabillity of smartphones, customers are able to look up a business in seconds and decide immediately whether or not they are interested in doing business with you. First impressions are important when trying to attract new clients!</p>
<h3>We do all the heavy lifting.</h3>
<p>We take the hard work out of owning a beautifully designed website. Building a website can be complicated and time consuming. Let us do it for you! We will walk through the entire process with you from the early stages of sitting down to talk about your needs, to the final stages of your business' beautiful site going live for the world to see.</p>
</div>
<div id="responsiveDesign">
<img src="img/smartphone.svg" alt="Responsive Web Design" class="section-icon">
<h2>Responsive Design</h2>
<p>Drumstick meatloaf pastrami short loin. Flank pancetta ribeye ham hock pork. Ball tip alcatra tongue, beef salami biltong ham strip steak. Alcatra short ribs bresaola fatback. Leberkas tongue ham hamburger kevin tail. Cupim strip steak sausage filet mignon picanha.</p>
</div>
<div class="grow">
<img src="img/store.svg" alt="Watch your business grow!" class="section-icon">
<h2>Increase Business</h2>
<p>Ball tip frankfurter leberkas, filet mignon tri-tip alcatra turkey. Pork belly porchetta bresaola venison salami jowl. Salami venison pastrami andouille tri-tip beef. Capicola landjaeger jerky, chuck venison kevin leberkas bresaola shank ribeye drumstick. Landjaeger shoulder alcatra chuck. Spare ribs pork belly short loin, hamburger venison pork loin porchetta alcatra flank sausage t-bone shoulder. Tail swine turkey corned beef, andouille porchetta meatball brisket alcatra strip steak biltong bacon prosciutto picanha.</p>
</div>
<div id="seo" class="seo">
<img src="img/binoculars.svg" alt="Show up in all the right places" class="section-icon">
<h2>Search Engine Optimization</h2>
<p>Short ribs salami doner leberkas, meatball tri-tip shankle boudin ball tip drumstick pig ham hock venison andouille tail. Prosciutto boudin frankfurter pork chop beef ribs leberkas beef cupim venison ground round shank. Pork belly cupim tenderloin spare ribs ham hock t-bone boudin rump sausage porchetta tail. Alcatra turkey pork ham hock.</p>
</div>
</div>
</div>
<div id="footer">
<footer>
<div id="socailMedia">
<img src="img/facebook.svg" alt="Contact us on Facebook">
<img src="img/google-plus.svg" alt="Contact us on Google+">
<img src="img/twitter.svg" alt="Contact us on Twitter">
<img src="img/instagram.svg" alt="Contact us on Instagram">
</div>
<p>Ben and Abigail Gooch 2016<span id="copywrite">©</span></p>
</footer>
</div>
</body>
</html>
CSS：
/***********************************/
/* Overall Styles */
/***********************************/
* {
box-sizing: border-box;
}
html {
width: 100%;
background: #6BD9EC;
//background: #e8ffbc;
font-family: helvetica;
}
h1 {
margin-top: 0px;
}
/***********************************/
/* Layout */
/***********************************/
#content {
background-color: #fff;
//background-color: #6BD9EC;
padding: 0 1em;
}
#wrapper {
min-height: calc(100vh - 54px);
}
/***********************************/
/* Top Bar / Nav */
/***********************************/
#header {
padding: 20px;
background-color: #A0DA30;
width: 100%;
border-bottom-color: #fff;
border-bottom-width: 10px;
border-bottom-style: solid;
box-shadow: 10px 10px 5px #4BB9CC;
margin-bottom: 20px;
}
nav {
text-align: center;
}
nav ul li a {
background-color: #6BD9EC;
color: white;
margin: 15px 0;
padding: 10px 15px;
border-radius: 15px;
border-color: #fff;
border-width: 2px;
border-style: solid;
display: block;
font-size: 1.3em;
}
nav li a:hover{
border-color: orange;
border-width: 4px;
box-shadow: 5px 10px 5px #80BA10;
}
header img {
display: block;
margin: 0 auto;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: #fff;
}
#header ul {
padding-left: 0;
}
/***********************************/
/* Main Content */
/***********************************/
#mainImage {
margin: 0 auto 40px auto;
display: block;
max-width: calc(100vw * .8);
border-radius: 20px;
}
#content {
border-radius: 15px;
box-shadow: 10px 10px 5px #4BB9CC;
padding-bottom: 15px;
margin-bottom: 20px;
}
#content p {
display: block;
font-size: 1.25em;
max-width: 80%;
margin: 0 auto;
}
h1,
h2,
h3 {
display: block;
text-align: center;
}
.section-icon {
max-height: 200px;
max-width: 200px;
display: block;
margin: 100px auto 40px auto;
}
/***********************************/
/* Footer */
/***********************************/
#footer {
width: 100%;
//max-height: 50px;
background: #A0DA30;
//padding: 15px;
//margin: 0px;
text-align: center;
font-size: .75em;
font-family: helvetica;
border-top-style: solid;
border-top-width: 10px;
border-top-color: #80BA10;
display: block;
}
footer p {
display: inline-block;
height: 30px;
margin: 5px 0 0 0;
}
#copywrite {
vertical-align: super;
}
#socailMedia {
display: block;
}
footer img {
margin-left: 8px;
max-width: 40px;
max-height: 40px;
border-radius: 8px;
}
/***********************************/
/* Media Queries */
/***********************************/
@media (min-width: 769px) {
#content {
width: 70%;
max-width: 2000px;
margin: 0 auto 20px auto;
}
nav,
nav ul,
nav ul li,
nav ul li a {
display: inline-block;
text-align: center;
margin: 0 10px;
}
nav a {
min-width: 200px;
font-size: 1.5em;
font-weight: bold;
}
#header img {
display: inline;
margin-bottom: 15px;
}
#header {
margin: 0 auto 20px auto;
}
#linksOnly {
text-align: center;
margin-top: -80px;
margin-bottom: 20px;
}
#footer {
max-height: none;
}
footer p {
display: block;
}
#socailMedia {
display: inline;
padding-top: 10px;
}
.seo {
display: inline;
margin: 0 auto;
max-width: 50%;
//background-color: rgba(217,228,234, .5);
}
.grow {
display: inline;
margin: 0 auto;
width: 50%;
//background-color: rgba(217,228,234, .5);
}
}
答案 0 :(得分：0)
如果您引用<div id="seo" class="seo">之类的div，则在其上使用display: inline;，只需对它们使用display: inline-block;，因为它们是块元素，您将能够看到它们在开发工具中，希望这会有所帮助。