html - 直接在 float 图像后添加内容

Question

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

我在这方面的结果是:http://i.imgur.com/0Y6Dsb3.png

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

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

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

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

Answer 1

每个 block 可能看起来像这样，将您的文本移动到 img block 中，然后用另一个类为 img-text 的子 div block 将其包装起来:

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