对齐我的图片

我是一名初学者，我正在一个网站上工作。我一直遵循我的教练给出的指导方针，但我在“我们的名册”/“我们的任务”部分遇到困难。正如你所看到的，这些图像并不一致。我想每行都有三张图片，但我无法做到！对齐我的图片

下面是该网站 http://gabrielr.sgedu.site/FinalProject/#Contact

而到了CSS样式表的链接的链接：http://gabrielr.sgedu.site/FinalProject/css/mainstyle.css

和HTML代码：

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

感谢

来源

2016-07-11 Gabi Rodríguez

你的左您的文章的右边距太宽。

而不是

article {margin: 2em;}

尝试：

article {margin: 2em 0;}

这将保持2em顶部和底部边缘，但是降低了左，右页边距为零。

来源

2016-07-11 23:40:50 Rounin

不能感谢你才好！ –

谢谢谢谢谢谢！ –

这个代码添加到你的CSS

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

来源

2016-07-11 23:43:09 Prince

谢谢你的帮助王子！真！ –

在这里留下评论，以防您需要一些帮助;） – Prince

看一看他下面的链接：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>

来源

2016-07-11 23:45:05 LauraBen

感谢您的帮助！真！这非常有用！ –

对齐我的图片

回答

相关问题