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

Question

你好，我正在尝试编写一个模板（我的第一个），（不使用 bootstrap，以提高我的 css 技能），这是我在网上找到的，我有一个投资组合区域中的问题，我在代码中将其称为 "gallery"。

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

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

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

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

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

Answer 1

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

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

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

Adding content directly after a floated image

html

css

templates

psd

twitter-bootstrap