Re: [O] [HTML export] How to display images side by side?

[Alan Schmitt]

Hello again,

address@hidden writes:

> Hello,
>
> I'm trying to display a bunch of images side by side, as if they were
> text (and would reflow when the window is too small).

I found a way to do it using CSS. Here is the org file that is exported
to html (note that I no longer have the style attribute, and I give the
surrounding node to give the context assigning the class).

--8<---------------cut here---------------start------------->8---
** Sponsors
  :PROPERTIES:
  :HTML_CONTAINER_CLASS: sponsors
  :END:

The workshop is kindly sponsored by:

#+attr_html: :height 60px
[[http://www.google.com/][file:images/Google_Logo.png]]

#+attr_html: :height 70px
[[http://www.janestreet.com/][file:images/Jane_Street_Logo.jpeg]]

#+attr_html: :height 50px
[[https://research.microsoft.com/][file:images/MSR_Logo.jpg]]
--8<---------------cut here---------------end--------------->8---

To get the alignment working properly (with images aligned at the
center), I then put the following in my style.css:

#+begin_src css
.sponsors .figure {
    display: inline;
}

.sponsors .figure p {
    display: inline;
}

.sponsors .figure img {
    vertical-align: middle;
}
#+end_src

If you simply want a vertical list of images, you can simply override
the setting for .figure p:

#+begin_src css
.sponsors .figure p {
    text-align: left;
}
#+end_src

Alan