圖像顯示| Banner div＆Styling

Question

我已經創建了一個非常簡單的客戶橫幅：1行6個圖像和橙色背景。我不確定我的最佳選擇是去除每張圖像之間自動創建的看似加倍的填充量。這裏是你可以查看當前橫幅的地方：http://dalaigroup.com/maryland-seo/

我想要記住的是圖像如何爲移動設備重新分配。多餘的填充和空白空間在這裏更加引人注目。由於圖像如何重新格式化爲移動設備，創建零或負邊距空間對我來說不起作用。

我不確定是否應該在每兩張圖片周圍創建容器，在響應表中工作，或者爲移動版本編寫單獨的代碼。是否有必要爲這樣的客戶橫幅編寫單獨的代碼？我怎麼寫這個，以便我更好地控制邊距和填充？當我嘗試爲這些元素設置特定尺寸時，徽標尺寸很容易受到損害。

你有任何提示將真的幫助。感謝您的時間。

Answer 1

上面的每個div是持有圖像是一個空的<p>標記。這會導致每個圖像頂部的額外空間。刪除這些，如我在下面的編輯中看到的，應該均衡間距。

在圖像上的一些其他建議：

• 小心設置在引導圖像準確的寬度，在較小的屏幕上查看時，它可能會導致間距問題。
• 引導具有這兩個類，你可能會增加，這將讓他們爲中心，擴展其大小比例可根據用戶屏幕尺寸的圖像：<img class="img-responsive center-block" src="foo" />
• 在下面的代碼段，垂直邊距缺少，因爲它不是從你的樣式拉WordPress的CSS

編輯：添加保證金定義的類從您提供的

.aligncenter { 
 
    margin-top: 25px; 
 
    margin-bottom: 25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row" style="background: #fe8101;"> 
 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16855" title="McCormick" src="http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square.png" alt="McCormick-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square.png 250w, http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square-150x150.png 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16272" title="Adidas" src="http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square.jpg" alt="Adidas-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16271" title="Abercrombie &amp; Fitch" src="http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square.jpg" alt="Abercrombie-and-Fitch-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16274" title="Citibank" src="http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square.jpg" alt="Citibank-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16288" title="Sheraton Hotels" src="http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square.jpg" alt="Sheraton-Hotels-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16278" title="Gap" src="http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square.jpg" alt="Gap-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 
</div>

網址