With the mark-up sign is superficial, so there were questions how to display images horizontally, of different sizes. That is, the maximum size is 45x45, but images can be 29x45 or 45x33. Without any extra libraries, I wanted to do something ala example , where the main thing and the image and under it are additional. Here interests the list of images as on the link. The trial and error method turned out, but unfortunately it is impossible to divide cells. Did so:

/*---css----*/ ul.slide{ display: table-row; height: 45px; } .slide li{ display: table-cell; border: 1px solid #000; width:45px; cursor: pointer; text-align: center; } .slide li img{ vertical-align:middle; }

and of course

 <ul class='slide'> <li> <img src="thumbnails/1379865497eknhh.jpg"> </li> </ul>

Maybe there are better options?

  • Than you are not satisfied with your option, so that you can not "split cells"? And what does it mean to divide the cells? Add side indents? - Gena Tsarinny
  • Yes, in general, satisfied. It can just eat kosher ways of withdrawal, and I made a bike. And you are right about the side margins , I would like to - xBCAAx
  • @xBCAAx, regarding your example - despite the fact that this is ebay, they chose a rather weird way to accomplish this task: each photo in a separate table (!) . I was slightly surprised. - Deonis
  • I’m talking about appearance, the internal implementation is of course different - xBCAAx

1 answer 1

You did not invent the bicycle, but use a fairly common technique for modern browsers. To help you add side margins, there is the border-spacing css-property, but the trouble is that it is used only for tables. Therefore, for your markup, you need to add an additional wrapper.

I threw an example on jsFiddle . You can read more about the property border-spacing here .

HTML

 <div class="wrapper"> <ul class='slide'> <li> <img src="http://placehold.it/45x45" /> </li> <li> <img src="http://placehold.it/45x35" /> </li> <li> <img src="http://placehold.it/45x15" /> </li> <li> <img src="http://placehold.it/35x45" /> </li> </ul> </div>

CSS

 .wrapper { display: table; border-spacing: 5px 2px; } ul.slide{ display: table-row; height: 45px; } .slide li{ display: table-cell; border: 1px solid #000; width:45px; cursor: pointer; text-align: center; } .slide li img{ vertical-align:middle; }
  • Thank. I also noticed all the same byaku, if the images are less than 45 pixels, then they go up despite the vertical-align. - xBCAAx