3 images in a single row

[amitkanjiyani3398]

Hello there i have got a query related to three images. How do i set 3 images in a single row one after one i have tryed it with css but it not working suggest me any more

[SamA74]

Images are in-line elements by default, so they should be in a row anyway if there is sufficient width for them in one line.

[PaulOB]

If images have been globaly set to display:block by default then you would need to target the images in question and return them to their natural state of inline.

e.g.

img.myimage{display:inline}

If the images are already inline then I guess you have each image in a block container and that will mean they stack vertically once again. You would need to set the parent to inline or perhaps floated but all depends on situation.

We need you to show us what you have tried and then we can tell you where you are going wrong:)

[Dr_John]

I tend to do this by putting them each in a separate div (same class of course) and set the height and width of the div in css so that they fit together nicely, and float them left. Then resize the image width to a value that fits in the div (fixed width images are so much easier to work with.) If there are going to be two or more rows of images, the height matters as well and the second row images can “catch” on the bottom of an extra tall image in the row above, leading to things like one row of three, then a row with one image below it, then the third row with three. I have had this happen when it’s a portrait gallery of many head shots taken by different people and the head and shoulders had to be cropped out of a larger image. ( I can’t always crop the exact same size to get a decent head shot.) Floating helps if there are a lot of images and the design is responsive in any way, so they stack neatly on different screen widths.

Using a div like this lets me add a line or two of text below each image inside its div.

If there is going to be a normal chunk of body text below the images, div height can waste some space or cause odd text wrapping effects, so a css clear on the content below fixes that, as does a common height for the image divs. You can also then “decorate” the div - borders, shadows, rounded corners, or do that to the images themselves.