引導奇怪的網格對齊

Question

你們中的一些人可以解釋一下為什么我的自舉網格表現得奇怪嗎？

最終結果必須類似於下圖：

但是，當我編寫代碼並檢查它時，我的瀏覽器版本與psd版本卻有所不同...這是怎么回事？ 紅色框來自我的瀏覽器視圖（chrome）。

有什么線索嗎？

 .facts { color: #fff; background: linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(https://s27.postimg.org/7kjcvsxc3/facts_bg.jpg) 0 0 no-repeat; background-size: cover; padding: 40px 0; width: 100%; min-height: 505px; } .facts-content { text-align: center; } .facts-content h3 { font-family: "Gotham-Book", sans-serif; font-size: 47px; line-height: 55px; padding: 0 5px; text-transform: uppercase; margin: 38px 0 41px 0; } .facts-content h3 span { color: #00c0ff; } .item h4 { font-family: "Gotham-Black", sans-serif; font-size: 40px; line-height: 49px; padding: 0 5px; } .item h4 > span { font-family: "Gotham-Light", sans-serif; } .item p { font-family: "Lato-Regular", sans-serif; font-size: 16px; line-height: 22px; padding: 0 5px; } .item a { display: block; margin-bottom: 27px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <section class="facts"> <div class="container"> <div class="facts-content"> <h3>some <span>facts</span> about us</h3> <div class="row"> <div class="col-md-3 col-sm-3"> <div class="item"> <a href="#"> <img src="https://s16.postimg.org/z29j3y5s1/ideas.png" width="124" height="124" title="someText" alt="someText"> </a> <h4>14<span>&#37;</span></h4> <p>Proin hendrerit velit a lectus vel nibh tincidunt</p> </div> <!-- item --> </div> <!-- col-md-3 --> <div class="col-md-3 col-sm-3"> <div class="item"> <a href="#"> <img src="https://s16.postimg.org/4jjqizgld/green_earth.png" width="125" height="126" title="someText" alt="someText"> </a> <h4>25<span>&#37;</span></h4> <p>Proin hendrerit velit a lectus vel nibh tincidunt</p> </div> <!-- item --> </div> <!-- col-md-3 --> <div class="col-md-3 col-sm-3"> <div class="item"> <a href="#"> <img src="https://s16.postimg.org/4yzlpqrwh/leafs.png" width="126" height="126" title="someText" alt="someText"> </a> <h4>75<span>&#37;</span></h4> <p>Proin hendrerit velit a lectus vel nibh tincidunt</p> </div> <!-- item --> </div> <!-- col-md-3 --> <div class="col-md-3 col-sm-3"> <div class="item"> <a href="#"> <img src="https://s16.postimg.org/5d0xpcc01/solar_panels.png" width="130" height="132" title="someText" alt="someText"> </a> <h4>90<span>&#37;</span></h4> <p>Proin hendrerit velit a lectus vel nibh tincidunt</p> </div> <!-- item --> </div> <!-- col-md-3 --> </div> <!-- row --> </div> <!-- facts-content --> </div> <!-- container --> </section> <!-- facts --> 

Answer 1

如果您擔心特定的像素對齊方式，請不要擔心。 在屏幕大小和分辨率變化如此之多的移動世界中，精確計數像素沒有多大意義。 您的輸出看起來不錯，並體現了PSD的精神。 不要試圖將所有內容精確地對齊100％。 這是徒勞的，幾乎沒有任何好處。