Walker News

CSS Trick: How To Align Images Of Gallery To Float In A Row?

How to use Cascading Style Sheets (CSS coding) to arrange a list of images or thumbnails so that they all float and wrap in a row by row appearance? For example, the two rows of random thumbnail in the right sidebar of this page?

It is not difficult at all, if you already know that or being a master of CSS. It is difficult for someone who only starts to learn CSS recently.

Using CSS to display images of gallery in row by row appearance

There is NO need to use CSS at all, if you simply want to display or float the list of images in a row, e.g.:

Nokia Video ManagerLinux du and df reports different free disk space.How to change color of Linux PS1 prompt?How to check Exchange Server version from Microsoft Outlook 2007?How to change or update Windows Update proxy server setting?

The following sample HTML code, without CSS, are good to use to display the list of thumbnails in one line, as those appear above:
<img src="a.jpg" alt="a" />
<img src="b.jpg" alt="b" />

I couldn’t get this simple thumbnails arrangement in the post at first attempt, because I tweaked the WordPress editor to automatically change my ENTER keypress to <br /> tag :-(

So, for my case, in order to avoid the auto-inserted <br /> tag after each <img /> tags, I have to make sure no ENTER keypress between each <img /> tags.

Having said that, the HTML source code of this page, as you view it from within web browser, the list of <img /> tags is in “one” long line, for that reason.

Define the CSS in style.css file by class selector and use it in img tag

Although CSS is not required to float images in one row, side by side, you can certainly make use of CSS to further customize the look and feel, such as padding, margin, border-style, etc:

How to disable IE8 security warning about mixed-content?How to create a bootable Windows 7 USB flash drive with diskpart command?How to disable the Citrix beep sound?How to customize Windows Send To menu?How to display custom logo in Windows Vista System Properties window?

To achieve this, each of the <img /> tag uses the style attribute to apply the sample CSS code:
style="margin:0px 3px 0px 0px;padding:3px;border:1px solid #FF6666;"

For the sake of easy maintenance, the CSS code should be centralized in style.css master file. The advantage of using style.css is obviously allows one to change style of a web page in no time, as compare to changing the CSS style repeatedly for each HTML elements.

1) Let say I create this CSS class selector in style.css:
.myimggal
{
   margin:0px 3px 0px 0px;
   padding:3px;
   border: 1px solid #FF6666;
}

2) In the <img /> tag, uses the “class” attribute to specify the class selector defined in style.css in order to apply whatever CSS code associated with the said class selector:
<img src="a.jpg" alt="a" class="myimggal" />
<img src="b.jpg" alt="b" class="myimggal" />

The change in .myimggal class selector is applied immediately to all img tags or any HTML elements that use this specific class selector.

With reference to How CSS can be used to create an image gallery.

Custom Search

2017  •  Privacy Policy