我试图在每个 div 之后显示一个 border-bottom，但只显示第一个 div。
**My CSS:**
.row:after {
content: " ";
clear:both;
display:block;
}
body {
margin: 0;
padding: 0;
border: 0 solid black;
font-family: Verdana,Geneva,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: bold;
}
div.wrapper {
width: 100%;
align: center;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
}
*, *:after, *:before {
box-sizing: border-box;
}
img {
max-width: 100%;
}
/*** HEADER ***/
div.hdr_logo {
top: 0;
left: 0;
width: 100%;
height: auto;
background-color: black;
}
img.hdr_logo {
position: relative;
padding: .5em;
border-radius: 50%;
width: 6em;
}
h3.hdr_logo {
position: absolute;
color: #90EE90;
font-family: Brush Script MT,cursive;
font-weight: 500;
font-size: 1em;
top: 3.75em;
left: 5em;
}
div.hdr_links {
position: absolute;
width: auto;
top: .15em;
right: .5em;
color: white;
float: right;
display: inline;
}
.hdr_links ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.hdr_links li{
display: inline;
padding: 0;
}
.hdr_links a{
text-decoration: none;
color: white;
font-size: .5em;
padding: 0;
}
.hdr_links li a:visited {
color: white;
}
.hdr_links li a:hover {
color: green;
}
.hdr_links li:not(:first-child):before {
content: " | ";
}
/*** BANNER ***/
div.banner {
margin: 0;
padding: 0;
width: 100%;
height: auto;
display: inline-block;
background-color: #101010;
color: WHITE;
text-align: center;
border-bottom: 1px solid black;
}
.banner img{
position: relative;
margin: auto;
padding: 0;
max-width: 100%;
height: auto;
display: block;
}
.banner h1{
font-size: 2em;
padding: .5em;
}
.banner h2{
font-size: 1.15em;
padding: .5em;
}
.banner a {
text-decoration: none;
font-size: 1em;
padding: 0;
}
.banner a:link, a:visited {
background-color: #90EE90;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
<!-- CAPTION -->
div.caption {
margin: 0;
padding: 0;
width: 100%;
height: 200px;
display: block;
background-color: white;
color: black;
text-align: left;
border-bottom: 1px solid black;
}
.caption h3 {
padding: 1em 0 0 1em;
text-decoration: none;
font-size: 1em;
}
.caption a {
padding: 0 0 0 1em;
text-decoration: none;
font-size: 1.25em;
color: #33CCFF;
}
.caption a:visited {
color: #33CCFF;
background-color: white;
}
<!-- CURRENT MONTH -->
div.currentMonth{
margin: 0;
padding: 0;
width: 100%;
height: auto;
display: inline-block;
text-align: center;
background-color: white;
color: black;
border-bottom: 5px solid black;
}
img.currentMonth{
position: relative;
margin: auto;
padding: 0;
max-width: 100%;
height: auto;
display: block;
}
.currentMonth h1{
position: relative;
font-size: 2em;
text-align: center;
}
.currentMonth h2{
position: relative;
font-size: 1.75em;
text-align: center;
}
.currentMonth a{
align: left;
text-decoration: none;
color: #99e6ff;
background-color: #DEB887;
padding: .1em .25em .1em .25em;
}
.currentMonth a:hover{
background-color: #a06d2c;
color: #99ccff;
}
<!--- FOOTER --->
div.ftr_main {
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: auto;
color: black;
background-color: white);
}
h3.ftr_main {
position: absolute;
top: 100px;
left: 20px;
font-size: 14px;
color: white;
}
div.ftr_legal {
position: relative;
left: 0;
bottom: 0;
padding: 1em;
width: 100%;
height: auto;
align: center;
color: white;
font-size: .75em;
line-height: 1em;
background-color: black;
}
.ftr_legal a{
align: center;
font-size: .8em;
color: white;
text-decoration: none;
}
**My HTML:**
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="description" content="<?php echo $page_description; ?>" />
<title>ZenBox by Jen™ ~ <?php echo $page_title; ?></title>
<link rel="stylesheet" type="text/css" href="ZenBoxStyleNEW.css">
<link href="http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'">
</head>
<body>
<div class="wrapper">
<!-- HEADER -->
<div class="row">
<div class="col-s-12">
<div class="hdr_logo">
<a href="index.php"><img class="hdr_logo" src="images/LogoGr150.png"></a>
<h3 class="hdr_logo">A monthly subscription box of all things Zen.</h3>
<div class="hdr_links">
<ul>
<li><a href="index.php">HOME</a></li>
<li><a href="ordernow.php">STORE</a></li>
<li><a href="about.php">ABOUT</a></li>
<li><a href="whois.php">MEET JEN</a></li>
</ul>
</div> <!-- CLOSE DIV HDR_LINKS -->
</div> <!-- CLOSE DIV HDR_LOGO -->
</div>
</div> <!-- CLOSE ROW -->
<!-- BANNER -->
<div class="row">
<div class="col-s-12">
<div class="banner">
<h2>
<?echo $text2text;?><br>
<?echo $text2L2text;?>
</h2>
<h1>
<?echo $mainText;?><br>
<?echo $mainText2;?>
</h1>
<a href="ordernow.php">BUY NOW</a><br><br><br>
</div> <!-- CLOSE BANNER -->
</div>
</div> <!-- CLOSE ROW -->
<div class="row">
<div class="col-s-12">
<div class="banner">
<img src="images/ZenBoxRudys.png">
</div> <!-- CLOSE BANNER -->
</div>
</div> <!-- CLOSE ROW -->
<!-- CAPTION -->
<div class="row">
<div class="col-s-12">
<div class="caption">
<h3><?echo $captionText;?></h3>
<a href="ordernow.php"><?echo $captionLink;?> ></a>
</div>
</div>
</div> <!-- CLOSE ROW -->
<!-- CURRENT MONTH -->
<div class="row">
<div class="col-s-12">
<div class="currentMonth">
<h1>See What's Inside<br>This Months ZenBox!</h1>
<img class="currentMonth" src="images/ZenGroupHomepage.jpg">
<h2>Click <a class="currentMonth" href="ordernow.php">HERE</a> to get started!</h2>
<br>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="row">
<div class="col-s-12">
<div class="ftr_legal">
2016 ZenBox by Jen™ All rights reserved. |
<a href="terms.php">Terms & Conditions</a><br>
</div>
</div>
</div>
</div> <!-- CLOSE WRAPPER -->
</body>
</html>
谁能告诉我我做错了什么？
最佳答案
我们无法从这段代码中找出任何东西。请按照描述使用尽可能少的代码重现问题 here .
关于html - Div 边框底部不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40321983/