對齊我的圖片

我是一名初學者，我正在一個網站上工作。我一直遵循我的教練給出的指導方針，但我在「我們的名冊」/「我們的任務」部分遇到困難。正如你所看到的，這些圖像並不一致。我想每行都有三張圖片，但我無法做到！對齊我的圖片

下面是該網站 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

感謝您的幫助！真！這非常有用！ –

對齊我的圖片

回答

相關問題