Question

I am a beginner and I am working on a website. I have been following the guidelines given by my instructor but I am having difficulty with the "Our Roster" / "Our Mission" sections. As you can see the images are not aligned together. I want to have three images on each row but I can't do it!

Here is a link to the website http://gabrielr.sgedu.site/FinalProject/#Contact

And a link to the CSS Style Sheet: http://gabrielr.sgedu.site/FinalProject/css/mainstyle.css

And the HTML code:

<section id="Our-Roster" class="Our-Roster">
  <div class="container container--max">
    <h2 class="section__title">Our Roster</h2>

    <article class="Our-Roster__item sm-one-third lg-one-third">
      <a href="https://vimeo.com/111731454">
        <img src="images/jamesbay.jpg" alt="James Bay - Hold Back the River" width="360" height="240">
        <h3 class="Our-Roster__title">James Bay</h3>
      </a>
    </article><!-- end .Our-Roster__item -->

    <article class="Our-Roster__item sm-one-half lg-one-third">
      <a href="https://vimeo.com/141213805">
        <img src="images/xambassadors.jpg" alt="X Ambassadors - Unsteady" width="360" height="240">
        <h3 class="Our-Roster__title">X Ambassadors</h3>
      </a>
    </article><!-- end .Our-Roster__item -->

    <article class="Our-Roster__item sm-one-half lg-one-third">
      <a href="https://vimeo.com/131065258">
        <img src="images/zaralarsson.jpg" alt="Zara Larsson - Uncover" width="360" height="240">
        <h3 class="Our-Roster__title">Zara Larsson</h3>
      </a>
    </article><!-- end .Our-Roster__item -->

    <article class="Our-Roster__item sm-one-half lg-one-third">
      <a href="https://vimeo.com/84217069">
        <img src="images/oceans.jpg" alt="Oceans - Where Feet May Fail" width="360" height="240">
        <h3 class="Our-Roster__title">Oceans</h3>
      </a>
    </article><!-- end .Our-Roster__item -->

    <article class="Our-Roster__item sm-one-half lg-one-third">
      <a href="https://vimeo.com/128250589">
        <img src="images/allenstone.jpg" alt="Allen Stone - Perfect World" width="360" height="240">
        <h3 class="Our-Roster__title">Allen Stone</h3>
      </a>
    </article><!-- end .Our-Roster__item -->

    <article class="Our-Roster__item sm-one-half lg-one-third">
      <a href="https://vimeo.com/121341988">
        <img src="images/ellegoulding.jpg" alt="Ellie Goulding - Love Me Like You Do" width="360" height="240">
        <h3 class="Our-Roster__title">Ellie Goulding</h3>
      </a>
    </article><!-- end .Our-Roster__item -->
  </div><!-- end .container -->
</section><!-- end .Our-Roster -->

Thanks

Answer 1

您文章的左右边距过宽。

而不是

article {margin: 2em;}

尝试：

article {margin: 2em 0;}

这将保持2em的上下边距，但将左右边距缩小为零。

Answer 2

将此代码添加到您的css

article {
  margin-left: 0;
  margin-right: 0;
}

Answer 3

看一下他的链接：http://getbootstrap.com/components/#thumbnails-custom-content

您看到的是一个3对象组件，您可以根据自己的喜好使用和自定义您正在构建的网站。您只需使用只显示缩略图的部分即可。

<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
    <h3>Thumbnail label</h3>
    <p>...</p>
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a     href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

Aligning my images

3 个答案: