无法在正确位置为元素留出边距
Can't give a margin to an element in the right place
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
////////////* CSS reset end *////////////////
body{
background: #fff;
}
h1,h2,h3,h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
p,a {
font-family: 'Open Sans', sans-serif;
}
header {
background: #fff;
padding: 20px 0;
position: fixed;
top:0;
width:100%;
z-index: 1;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
*{
box-sizing: border-box;
outline: none;
}
header:after{
content: "";
display:table;
clear:both;
}
.wrapper {
width: 96%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2%;
}
div#logo {
background: url(img/logo.png) no-repeat;
width: 79px;
height: 28px;
float: left;
}
header nav {
float:right;
}
header nav li a {
color:#606060;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size:12px;
}
header nav h2 {
height: 0;
text-indent: -10000px;
}
header nav li {
float: left;
margin-left: 22px;
margin-top: 8px;
}
#main-banner {
background: url(img/2.jpg) no-repeat center center ;
background-size: cover;
height: 80vh;
text-align: center;
}
.banner-overlay {
text-align: center;
position: relative;
top: 50%;
margin: 0;
transform: translatey(-50%);
}
h1 {
margin-top: 20px;
color: #fff;
text-transform: uppercase;
font-size: 72px;
}
.banner-overlay .after-welcome {
color: #fff;
font-size: 24px;
margin-top: 30px;
margin-bottom: 30px;
padding: 0 20%;
font-family: 'Open Sans', sans-serif;
}
.btn {
/* background: #bf8040;*/
background: linear-gradient(to bottom, #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%);
color: #fff;
display: block;
padding: 25px 20px;
width: 220px;
margin: 0 auto;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
}
section {
text-align: center;
padding: 125px 0;
}
#gallery {
background: #dfdfdf;
}
h2 {
color:#282828;
margin-top: 10px;
font-size: 45px;
}
h3 {
color:#777;
font-weight: 400;
font-size: 20px;
margin-top:20px;
margin-bottom:75px;
}
.projects {
background: #fff;
}
section:after{
content: "";
display:table;
clear:both;
}
.gallery-image {
float: left;
width: 33.333%;
padding-left:1.5%;
padding-right:1.5%;
text-align: center;
}
#gallery img{
width: 100%;
height: auto;
}
.gallery-image a {
display: block;
background: white;
}
.img-text {
background: white;
padding: 20px;
}
.img-text p{
font-size: 14px;
color:#777;
margin-top:5px;
}
.margin-top {
margin-top: 20px;
}
<main>
<section id="gallery">
<div class="wrapper">
<h2>Our Gallery</h2>
<h3>Lorem bizzle dolizzle sizzle amet</h3>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
</div>
</section>
我正在尝试添加一个 <p> 并给它一个顶部边距，这样它的内容离图库内容更远，但它在图像顶部提供了那个边距。
我该如何解决？如果我没记错的话，可能是 clearfix 的问题，但是 clearfix 没有帮助。
给段落display: inline-block;。
让我解释一下：
p{
display:block;
}
现在 p 边距将起作用，因此项目后的 "Lorem bizzle dolizzle sizzle amet" 句子将下降，因为它有边距顶部。
是的，这是一个 clearfix 问题，因为它上面有 3 个浮动元素。为这些 .projects 元素添加一个包装器并清除浮动。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
////////////* CSS reset end *////////////////
body{
background: #fff;
}
h1,h2,h3,h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
p,a {
font-family: 'Open Sans', sans-serif;
}
header {
background: #fff;
padding: 20px 0;
position: fixed;
top:0;
width:100%;
z-index: 1;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
*{
box-sizing: border-box;
outline: none;
}
header:after{
content: "";
display:table;
clear:both;
}
.wrapper {
width: 96%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2%;
}
div#logo {
background: url(img/logo.png) no-repeat;
width: 79px;
height: 28px;
float: left;
}
header nav {
float:right;
}
header nav li a {
color:#606060;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size:12px;
}
header nav h2 {
height: 0;
text-indent: -10000px;
}
header nav li {
float: left;
margin-left: 22px;
margin-top: 8px;
}
#main-banner {
background: url(img/2.jpg) no-repeat center center ;
background-size: cover;
height: 80vh;
text-align: center;
}
.banner-overlay {
text-align: center;
position: relative;
top: 50%;
margin: 0;
transform: translatey(-50%);
}
h1 {
margin-top: 20px;
color: #fff;
text-transform: uppercase;
font-size: 72px;
}
.banner-overlay .after-welcome {
color: #fff;
font-size: 24px;
margin-top: 30px;
margin-bottom: 30px;
padding: 0 20%;
font-family: 'Open Sans', sans-serif;
}
.btn {
/* background: #bf8040;*/
background: linear-gradient(to bottom, #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%);
color: #fff;
display: block;
padding: 25px 20px;
width: 220px;
margin: 0 auto;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
}
section {
text-align: center;
padding: 125px 0;
}
#gallery {
background: #dfdfdf;
}
h2 {
color:#282828;
margin-top: 10px;
font-size: 45px;
}
h3 {
color:#777;
font-weight: 400;
font-size: 20px;
margin-top:20px;
margin-bottom:75px;
}
.projects {
background: #fff;
}
section:after{
content: "";
display:table;
clear:both;
}
.gallery-image {
float: left;
width: 33.333%;
padding-left:1.5%;
padding-right:1.5%;
text-align: center;
}
#gallery img{
width: 100%;
height: auto;
}
.gallery-image a {
display: block;
background: white;
}
.img-text {
background: white;
padding: 20px;
}
.img-text p{
font-size: 14px;
color:#777;
margin-top:5px;
}
.margin-top {
margin-top: 20px;
}
.projects-container:after {
content: '';
display: table;
clear: both;
}
<main>
<section id="gallery">
<div class="wrapper">
<h2>Our Gallery</h2>
<h3>Lorem bizzle dolizzle sizzle amet</h3>
<div class="projects-container">
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
</div>
<p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
</div>
</section>
只需在 <p> 标签上方添加 clear:both div
<div style="clear: both;"></div>
检查下面的片段
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
////////////* CSS reset end *////////////////
body{
background: #fff;
}
h1,h2,h3,h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
p,a {
font-family: 'Open Sans', sans-serif;
}
header {
background: #fff;
padding: 20px 0;
position: fixed;
top:0;
width:100%;
z-index: 1;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
*{
box-sizing: border-box;
outline: none;
}
header:after{
content: "";
display:table;
clear:both;
}
.wrapper {
width: 96%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2%;
}
div#logo {
background: url(img/logo.png) no-repeat;
width: 79px;
height: 28px;
float: left;
}
header nav {
float:right;
}
header nav li a {
color:#606060;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size:12px;
}
header nav h2 {
height: 0;
text-indent: -10000px;
}
header nav li {
float: left;
margin-left: 22px;
margin-top: 8px;
}
#main-banner {
background: url(img/2.jpg) no-repeat center center ;
background-size: cover;
height: 80vh;
text-align: center;
}
.banner-overlay {
text-align: center;
position: relative;
top: 50%;
margin: 0;
transform: translatey(-50%);
}
h1 {
margin-top: 20px;
color: #fff;
text-transform: uppercase;
font-size: 72px;
}
.banner-overlay .after-welcome {
color: #fff;
font-size: 24px;
margin-top: 30px;
margin-bottom: 30px;
padding: 0 20%;
font-family: 'Open Sans', sans-serif;
}
.btn {
/* background: #bf8040;*/
background: linear-gradient(to bottom, #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%);
color: #fff;
display: block;
padding: 25px 20px;
width: 220px;
margin: 0 auto;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
}
section {
text-align: center;
padding: 125px 0;
}
#gallery {
background: #dfdfdf;
}
h2 {
color:#282828;
margin-top: 10px;
font-size: 45px;
}
h3 {
color:#777;
font-weight: 400;
font-size: 20px;
margin-top:20px;
margin-bottom:75px;
}
.projects {
background: #fff;
}
section:after{
content: "";
display:table;
clear:both;
}
.gallery-image {
float: left;
width: 33.333%;
padding-left:1.5%;
padding-right:1.5%;
text-align: center;
}
#gallery img{
width: 100%;
height: auto;
}
.gallery-image a {
display: block;
background: white;
}
.img-text {
background: white;
padding: 20px;
}
.img-text p{
font-size: 14px;
color:#777;
margin-top:5px;
}
.margin-top {
margin-top: 20px;
}
<main>
<section id="gallery">
<div class="wrapper">
<h2>Our Gallery</h2>
<h3>Lorem bizzle dolizzle sizzle amet</h3>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div style="clear: both;"></div>
<p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
</div>
</section>
</main>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
////////////* CSS reset end *////////////////
body{
background: #fff;
}
h1,h2,h3,h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
p,a {
font-family: 'Open Sans', sans-serif;
}
header {
background: #fff;
padding: 20px 0;
position: fixed;
top:0;
width:100%;
z-index: 1;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
*{
box-sizing: border-box;
outline: none;
}
header:after{
content: "";
display:table;
clear:both;
}
.wrapper {
width: 96%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2%;
}
div#logo {
background: url(img/logo.png) no-repeat;
width: 79px;
height: 28px;
float: left;
}
header nav {
float:right;
}
header nav li a {
color:#606060;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size:12px;
}
header nav h2 {
height: 0;
text-indent: -10000px;
}
header nav li {
float: left;
margin-left: 22px;
margin-top: 8px;
}
#main-banner {
background: url(img/2.jpg) no-repeat center center ;
background-size: cover;
height: 80vh;
text-align: center;
}
.banner-overlay {
text-align: center;
position: relative;
top: 50%;
margin: 0;
transform: translatey(-50%);
}
h1 {
margin-top: 20px;
color: #fff;
text-transform: uppercase;
font-size: 72px;
}
.banner-overlay .after-welcome {
color: #fff;
font-size: 24px;
margin-top: 30px;
margin-bottom: 30px;
padding: 0 20%;
font-family: 'Open Sans', sans-serif;
}
.btn {
/* background: #bf8040;*/
background: linear-gradient(to bottom, #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%);
color: #fff;
display: block;
padding: 25px 20px;
width: 220px;
margin: 0 auto;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
}
section {
text-align: center;
padding: 125px 0;
}
#gallery {
background: #dfdfdf;
}
h2 {
color:#282828;
margin-top: 10px;
font-size: 45px;
}
h3 {
color:#777;
font-weight: 400;
font-size: 20px;
margin-top:20px;
margin-bottom:75px;
}
.projects {
background: #fff;
}
section:after{
content: "";
display:table;
clear:both;
}
.gallery-image {
float: left;
width: 33.333%;
padding-left:1.5%;
padding-right:1.5%;
text-align: center;
}
#gallery img{
width: 100%;
height: auto;
}
.gallery-image a {
display: block;
background: white;
}
.img-text {
background: white;
padding: 20px;
}
.img-text p{
font-size: 14px;
color:#777;
margin-top:5px;
}
.margin-top {
margin-top: 20px;
}
<main>
<section id="gallery">
<div class="wrapper">
<h2>Our Gallery</h2>
<h3>Lorem bizzle dolizzle sizzle amet</h3>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
</div>
</section>
我正在尝试添加一个 <p> 并给它一个顶部边距，这样它的内容离图库内容更远，但它在图像顶部提供了那个边距。
我该如何解决？如果我没记错的话，可能是 clearfix 的问题，但是 clearfix 没有帮助。
给段落display: inline-block;。
让我解释一下：
p{
display:block;
}
现在 p 边距将起作用，因此项目后的 "Lorem bizzle dolizzle sizzle amet" 句子将下降，因为它有边距顶部。
是的，这是一个 clearfix 问题，因为它上面有 3 个浮动元素。为这些 .projects 元素添加一个包装器并清除浮动。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
////////////* CSS reset end *////////////////
body{
background: #fff;
}
h1,h2,h3,h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
p,a {
font-family: 'Open Sans', sans-serif;
}
header {
background: #fff;
padding: 20px 0;
position: fixed;
top:0;
width:100%;
z-index: 1;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
*{
box-sizing: border-box;
outline: none;
}
header:after{
content: "";
display:table;
clear:both;
}
.wrapper {
width: 96%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2%;
}
div#logo {
background: url(img/logo.png) no-repeat;
width: 79px;
height: 28px;
float: left;
}
header nav {
float:right;
}
header nav li a {
color:#606060;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size:12px;
}
header nav h2 {
height: 0;
text-indent: -10000px;
}
header nav li {
float: left;
margin-left: 22px;
margin-top: 8px;
}
#main-banner {
background: url(img/2.jpg) no-repeat center center ;
background-size: cover;
height: 80vh;
text-align: center;
}
.banner-overlay {
text-align: center;
position: relative;
top: 50%;
margin: 0;
transform: translatey(-50%);
}
h1 {
margin-top: 20px;
color: #fff;
text-transform: uppercase;
font-size: 72px;
}
.banner-overlay .after-welcome {
color: #fff;
font-size: 24px;
margin-top: 30px;
margin-bottom: 30px;
padding: 0 20%;
font-family: 'Open Sans', sans-serif;
}
.btn {
/* background: #bf8040;*/
background: linear-gradient(to bottom, #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%);
color: #fff;
display: block;
padding: 25px 20px;
width: 220px;
margin: 0 auto;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
}
section {
text-align: center;
padding: 125px 0;
}
#gallery {
background: #dfdfdf;
}
h2 {
color:#282828;
margin-top: 10px;
font-size: 45px;
}
h3 {
color:#777;
font-weight: 400;
font-size: 20px;
margin-top:20px;
margin-bottom:75px;
}
.projects {
background: #fff;
}
section:after{
content: "";
display:table;
clear:both;
}
.gallery-image {
float: left;
width: 33.333%;
padding-left:1.5%;
padding-right:1.5%;
text-align: center;
}
#gallery img{
width: 100%;
height: auto;
}
.gallery-image a {
display: block;
background: white;
}
.img-text {
background: white;
padding: 20px;
}
.img-text p{
font-size: 14px;
color:#777;
margin-top:5px;
}
.margin-top {
margin-top: 20px;
}
.projects-container:after {
content: '';
display: table;
clear: both;
}
<main>
<section id="gallery">
<div class="wrapper">
<h2>Our Gallery</h2>
<h3>Lorem bizzle dolizzle sizzle amet</h3>
<div class="projects-container">
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
</div>
<p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
</div>
</section>
只需在 <p> 标签上方添加 clear:both div
<div style="clear: both;"></div>
检查下面的片段
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
////////////* CSS reset end *////////////////
body{
background: #fff;
}
h1,h2,h3,h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
p,a {
font-family: 'Open Sans', sans-serif;
}
header {
background: #fff;
padding: 20px 0;
position: fixed;
top:0;
width:100%;
z-index: 1;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
*{
box-sizing: border-box;
outline: none;
}
header:after{
content: "";
display:table;
clear:both;
}
.wrapper {
width: 96%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2%;
}
div#logo {
background: url(img/logo.png) no-repeat;
width: 79px;
height: 28px;
float: left;
}
header nav {
float:right;
}
header nav li a {
color:#606060;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size:12px;
}
header nav h2 {
height: 0;
text-indent: -10000px;
}
header nav li {
float: left;
margin-left: 22px;
margin-top: 8px;
}
#main-banner {
background: url(img/2.jpg) no-repeat center center ;
background-size: cover;
height: 80vh;
text-align: center;
}
.banner-overlay {
text-align: center;
position: relative;
top: 50%;
margin: 0;
transform: translatey(-50%);
}
h1 {
margin-top: 20px;
color: #fff;
text-transform: uppercase;
font-size: 72px;
}
.banner-overlay .after-welcome {
color: #fff;
font-size: 24px;
margin-top: 30px;
margin-bottom: 30px;
padding: 0 20%;
font-family: 'Open Sans', sans-serif;
}
.btn {
/* background: #bf8040;*/
background: linear-gradient(to bottom, #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%);
color: #fff;
display: block;
padding: 25px 20px;
width: 220px;
margin: 0 auto;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
}
section {
text-align: center;
padding: 125px 0;
}
#gallery {
background: #dfdfdf;
}
h2 {
color:#282828;
margin-top: 10px;
font-size: 45px;
}
h3 {
color:#777;
font-weight: 400;
font-size: 20px;
margin-top:20px;
margin-bottom:75px;
}
.projects {
background: #fff;
}
section:after{
content: "";
display:table;
clear:both;
}
.gallery-image {
float: left;
width: 33.333%;
padding-left:1.5%;
padding-right:1.5%;
text-align: center;
}
#gallery img{
width: 100%;
height: auto;
}
.gallery-image a {
display: block;
background: white;
}
.img-text {
background: white;
padding: 20px;
}
.img-text p{
font-size: 14px;
color:#777;
margin-top:5px;
}
.margin-top {
margin-top: 20px;
}
<main>
<section id="gallery">
<div class="wrapper">
<h2>Our Gallery</h2>
<h3>Lorem bizzle dolizzle sizzle amet</h3>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div style="clear: both;"></div>
<p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
</div>
</section>
</main>