在浮动图像之后直接添加内容

Question

您好，我正在尝试编写一个模板（我的第一个），（不使用引导程序，以提高我的 css 技能），这是我在网上找到的，我在投资组合领域遇到了一个问题，我称之为“画廊”在我的代码中。

我在这个区域的结果是：http://i.imgur.com/0Y6Dsb3.png

我得到的是： https://codepen.io/Kestvir/pen/BReraN

我认为这是一个 clearfix 问题，但 <section> 已被清除。我应该如何解决这个问题？

其次，模板中的图像是使用<img> 元素导入的，所以我决定这样做，但不会将它们作为背景图像导入，更好更正确的方法？

另外，是否有任何好的教程，或任何其他方法来改进编码 PSD 模板？因为，尽管我已经观看了十亿个“CSS 基础”视频，但我真的在为 PSD 设计编码而苦苦挣扎，不知道最佳实践，也找不到任何好的视频，那就是英文，不使用引导程序。

Answer 1

每个块可能看起来像这样，将您的文本移动到 img 块中，然后用另一个带有 img-text 类的子 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>

然后添加以下css：

.gallery-image a {
  background: white;
}

.img-text {
  background: white;
}

这应该可以帮助您继续编写代码以实现您想要实现的目标

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;
}

* {
  box-sizing: border-box;
  outline: none;
}

.wrapper {
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2%;
}

#gallery {
  background: #dfdfdf;
  text-align: center;
  padding: 125px 0;
  margin-left: auto;
  margin-right: auto;
}

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%;
  padding-right: 1%;
  text-align: center;
}

#gallery img {
  width: 100%;
  height: 289px;
}

.img-text {
  background: white;
}

<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">
          <div class="img-text">
            <a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
            <h4>A project</h4>
            <p>Some text</p>
          </div>
        </div>
      </div>


      <div class="projects">
        <div class="gallery-image">
          <div class="img-text">
            <a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
            <h4>A project</h4>
            <p>Some text</p>
          </div>
        </div>
      </div>

      <div class="projects">
        <div class="gallery-image">
          <div class="img-text">
            <a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
            <h4>A project</h4>
            <p>Some text</p>
          </div>
        </div>
      </div>


    </div>

  </section>

</main>