当前位置: 动力学知识库 > 问答 > 编程问答 >

html - CSS-Not able to place a list of Images side by side

问题描述:

I have a list of CSS Images which needs to be aligned side by side. By that I mean two adjacent Images should share a common border. So, in case there are 20 Images, I would like to stack them in rows of 4 each which can change depending on the screen size. Currently, there is white space between Images which I clearly don't want. I have attached a JS-Fiddle to show what I am doing.

Kindly help

CSS

 .photo-grid {

margin: 1em auto;

max-width: 300%;

text-align: center;

}

.photo-grid li {

display: inline-block;

margin: 1em;

width: 125px;

}

.photo-grid img {

display: block;

height: auto;

max-width: 100%;

}

.photo-grid figure {

height: 125px;

overflow: hidden;

position: relative;

width: 125px;

}

.photo-grid figcaption {

background: rgba(0,0,0,0.8);

color: white;

display: table;

height: 100%;

left: 0;

opacity: 0;

position: absolute;

right: 0;

top: 0;

z-index: 100;

}

.photo-grid figcaption p {

display: table-cell;

font-size: 1.5em;

position: relative;

top: -40px;

width: 289px;

vertical-align: middle;

}

.photo-grid li:hover figcaption {

opacity: 1;

}

JS Fiddle

网友答案:

To remove the space between images, the easiest way is probably to remove any white space in the HTML between the elements. Your images are set to inline-block which means white space between the elements will be preserved just like any other inline element (like span or a or whatever).

Another way is to set font-size: 0 on the container, which will make the spaces between the elements 0 size, removing them from the display.

Another way is to float the images, which will make them block level elements (so white space isn't preserved) and stack them next to one another.

img {
  max-width: 200px;
  height: auto;
}

.font-zero {
  font-size: 0;
}

.float {
  overflow: auto;
}
.float img {
  float: left;
}
<img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"><img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"><img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">

<div class="font-zero">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
</div>

<div class="float">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
</div>
网友答案:

Fix your margins. If you have undesired white space between the pictures, that is likely due to your margin of 1em. Put a top and bottom margin if you want, but don't do an all around one.

网友答案:

First of all you have to make a class group of 25% width -> col25. Then you make three classes for each image one for small devices -> .scol25, one for medium devices -> .mcol25, and one for large devices -> .lcol25.

Then you remove the margin between the images and make the have box sizing border box.

.scol25, .mcol25, .lcol25 {
  box-sizing:border-box;
  margin-right:-3px;
  margin-top:-4px;
  text-align:center;
  padding:0px;
}

At last you set the widths and height for each screen size to be able always to show four rows of four images (except on mobiles where is one image per row).

<div id="photo-grid">
<img id="img-1" class="photo" alt="alt-of-img"/>
...
<img id="img-16" class="photo" alt="alt-of-img"/>
</div>

Dont forget to remove the whitespaces between the <img> tags so that you have no blank space.

PS. the margin-top:-4px i added because it wouldnt work on the online compilers, so when you add it to your page you can remove the command.

Hope it helps.

Link: jsfiddle.net

If the link doesnt show you the code please tell me.

分享给朋友:
您可能感兴趣的文章:
随机阅读: