From mboxrd@z Thu Jan  1 00:00:00 1970
From: Alan Schmitt <alan.schmitt@polytechnique.org>
Subject: Re: [HTML export] How to display images side by side?
Date: Fri, 11 Oct 2013 15:53:49 +0200
Message-ID: <m261t3lxqq.fsf@polytechnique.org>
References: <m27gdkkkpr.fsf@polytechnique.org>
Mime-Version: 1.0
Content-Type: text/plain
Return-path: <emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org>
Received: from eggs.gnu.org ([2001:4830:134:3::10]:51730)
	by lists.gnu.org with esmtp (Exim 4.71)
	(envelope-from <alan.schmitt@polytechnique.org>) id 1VUdAA-0006jZ-8c
	for emacs-orgmode@gnu.org; Fri, 11 Oct 2013 09:53:59 -0400
Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71)
	(envelope-from <alan.schmitt@polytechnique.org>) id 1VUdA4-0006hA-UQ
	for emacs-orgmode@gnu.org; Fri, 11 Oct 2013 09:53:54 -0400
Received: from mail2-relais-roc.national.inria.fr ([192.134.164.83]:44715)
	by eggs.gnu.org with esmtp (Exim 4.71)
	(envelope-from <alan.schmitt@polytechnique.org>) id 1VUdA4-0006gt-Nn
	for emacs-orgmode@gnu.org; Fri, 11 Oct 2013 09:53:48 -0400
In-reply-to: <m27gdkkkpr.fsf@polytechnique.org>
List-Id: "General discussions about Org-mode." <emacs-orgmode.gnu.org>
List-Unsubscribe: <https://lists.gnu.org/mailman/options/emacs-orgmode>,
	<mailto:emacs-orgmode-request@gnu.org?subject=unsubscribe>
List-Archive: <http://lists.gnu.org/archive/html/emacs-orgmode>
List-Post: <mailto:emacs-orgmode@gnu.org>
List-Help: <mailto:emacs-orgmode-request@gnu.org?subject=help>
List-Subscribe: <https://lists.gnu.org/mailman/listinfo/emacs-orgmode>,
	<mailto:emacs-orgmode-request@gnu.org?subject=subscribe>
Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org
Sender: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org
To: emacs-org list <emacs-orgmode@gnu.org>

Hello again,

alan.schmitt@polytechnique.org 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