Question

I’ve create a very simple client banner: 1 row of 6 images and an orange background. I'm not sure what my best options are for removing the seemingly doubled amount of padding that is automatically created between each image. Here’s where you can view the current banner: http://dalaigroup.com/maryland-seo/

What I'm trying to keep in mind, is how the images redistribute for a mobile device. The excess padding and margin space is much more noticeable here. Creating zero or negative margin space doesn't work in my favor, because of how the images reformat for mobile.

I'm not sure if I should be creating containers around every 2 images, working in a responsive table, or writing separate code for a mobile version. Is it necessary to write separate code for a client banner like this? How can I write this so that I have more control over the margin and padding? When I try to set specific sizes for these elements, the logo sizes are easily compromised.

Any tips you have will really help. Thank you for your time.

Answer 1

在每个持有图片的div上方都是一个空的<p>标记。这会在每个图像的顶部产生额外的空间。正如我在下面的编辑中所看到的那样，删除它们应该使间距相等。

关于图像的其他一些建议：

小心设置引导程序中图像的精确宽度，在较小的屏幕上查看时可能会造成间距问题。
Bootstrap有两个类可以添加到图像中，使它们保持居中，并根据用户屏幕大小按比例缩放它们的大小：<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;">
	<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>

	<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>

	<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>

	<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>

	<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>

	<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>

Image Display | Banner div & Styling

1 个答案:

Image Display | Banner div &amp; Styling

1 个答案:

Image Display | Banner div & Styling