Tables are keen if yous are showing information as good as require strong alignment, or if yous don't head your mobile device visitors having to either scroll, or to pinch their covert hence much that they cannot read the text.
But inwards that location is a means to lay out pictures hence that they display side past times times side if there's room on the screen, or starting fourth dimension on a new concern if there's not.
I've done this lately on a spider spider web log where truly wanted to build a display for concluding / side past times times side calendar calendar week as good as concluding / side past times times side solar year on 2 unlike dimensions. It looks like this on a smartphone vs a tablet. Notice that on the tablet, the 2 middle pictures are on the same line.
How to lay out several pictures side-by-side if there's space, or one-under-another if not
Start to prepare your post service inwards the common way.Add your pictures to the post service inwards the common way. Ideally, lay them merely before or merely after to a greater extent than or less marker text that yous tin give the axe utilisation to help yous to regain the code for it inwards the side past times times side step.
Hover over each picture, as good as behave the small size (you tin give the axe alter this later)
Go into HTML mode.
Find the place where the pictures are. (If you've used marker-text, merely utilisation your browser's search feature to learn to it.)
Add this code, merely where yous wish the concern of images (or other items) to finish up.
<div style="display: inline-block; margin-bottom: 2em; margin-right: 2em; width: NN;">
IMAGE CODE FOR PICTURE</div>
<div style="display: inline-block; margin-bottom: 2em; margin-right: 2em; width: NN;">
IMAGE CODE FOR PICTURE</div>
<div style="display: inline-block; margin-bottom: 2em; margin-right: 0em; width: NN;">
IMAGE CODE FOR PICTURE</div>
That has infinite for three pictures - yous tin give the axe delete i or add together together to a greater extent than lines if yous wish to - merely build certain plenty that the existent concluding i has margin-right: 0em; as good as the others all create got margin-right: 2em;
Now, for each motion-picture exhibit that yous added,
- Find the HTML code for it. (This post service has a detailed explanation of what the HTML code for a picture)
- Delete the height = "nn" part from it (nnn = whatever number is there)
- In the width = "nnn" part, replace nnn alongside "100%", hence it says width = "100%"
Note: this is saying to build the motion-picture exhibit create got upwards the whole width of the partitioning yous create got assigned it to. You tin give the axe learn inwards smaller than 100%. But yous wish to practise it lay a bigger margin between the 2 pictures, as good as so yous tin give the axe practise this past times times increasing the value inwards margin-right: 2em;
- Move the motion-picture exhibit code to where it says IMAGE CODE FOR PICTURE
- Decide how wide the motion-picture exhibit should be, as good as change the value inwards Width: NN inside that DIV disceptation to the right amount.
You tin give the axe either utilisation pixels (eg width: 100px;), ems (eg width: 20em;) or percentages (width: 40%;) If yous utilisation percentages, as good as so the total amount for all the pictures should suffer a piffling less than 100%, hence allow for to a greater extent than or less infinite between the pictures: for example, alongside a 2em margin as good as three pictures inwards a row, yous may require to build the total approx 90%.
Go back into Compose mode, as good as banking concern cheque that your pictures facial expression roughly right - if necessary, yous may require to adapt the motion-picture exhibit sizes. (See the banking concern electrical load below under Troubleshooting for to a greater extent than almost this.)
Delete the score text.
Job done! Your pictures testament forthwith display side-by-side if they tin give the axe all agree into the user's screen, or i under to a greater extent than or less other if not.
Troubleshooting
Getting the pictures right tin give the axe suffer quite fiddly, hence I recommend preparing the spider spider web log post service inwards private, hence yous tin give the axe practise this inwards stages, as good as salve your operate regularly every bit yous go.Your pictures testament suffer vertically aligned on the bottom axis, as good as this means that the approach testament operate best alongside pictures that are the same height. (I'm working on to a greater extent than or less other article looking at alignment issues - it's they're quite tricky.)
Post editor catch vs your visitor's screen
An number that many new bloggers fighting alongside is that what they tin give the axe run across inwards the post service editor is non the same as what their blog-visitors testament see.The post service editor covert is alone a certain plenty width. Most times, it is smaller than the width of the main re-create body of your blog. So, if yous create got used fixed-widths (ie inwards pixels, or ems, non percentages), to a greater extent than pictures agree on the same concern inwards your spider spider web log than inwards the post service editor. But if a visitor is using their smartphone to read your spider spider web log (and I practise a lot of my blog-reading on the telephone these days) - the covert width is less than it is inwards the post service editor.
This is why using <div> statements instead of <table>'s is a skillful idea. But it does means that sometimes yous testament create got to compromise on whether things tin give the axe suffer lay together.
Is this alone for pictures?
No - yous tin give the axe utilisation this technique alongside blocks of text, videos - inwards fact anything that yous tin give the axe lay into your blog.What almost gadgets?
You tin give the axe utilisation this technique anywhere that yous tin give the axe edit the HTML. So, yous tin give the axe lay pictures inwards a row inwards your sidebar, header or footer past times times using a HTML-gadget. (This post shows a handy means to learn the motion-picture exhibit code when you're making gadgets.)Captions
I don't recommend using captions alongside this this technique. Blogger shows them using tables: they lay the photograph as good as text into a one-column-two-row table, as good as this makes working alongside the motion-picture exhibit code a lot to a greater extent than difficult. If yous truly wish to utilisation them, as good as so add together together them after yous create got moved your motion-picture exhibit code inside the <div>...</div> statements.Related Articles:
Using a tabular array to display information inwards your blog
Marker text helps yous to regain places inwards your spider spider web log post
Putting text as good as photographs side-by-side
How to add together together a motion-picture exhibit to a spider spider web log post
How to learn the HTML code for a motion-picture exhibit when yous don't create got an insert-picture icon on the toolbar