With Asciidoctor markup we can position images in our document. We can even float images, so text can next to an image, inside only below or about the image. We can also define multiple images to float, so the images are displayed on the same line next to each other. Any text that follows these images is also displayed next to the images. If we want only to have floating images, but the text starting under the images we can place the images inside an open block and assign the block the role float-group.
In the next example we first define three images that all have roles to float left. In the second part we group these images using the role float-group, so the text will not be displayed next to the images, but under the images:
:imagesdir: images/ = Grouping floats // Images in open block to indicate // they belong together. -- image::groovy.png[float="left"] image::gradle.png[float="left"] // Define float role, instead of attribute. [.left] image::grails.png[] -- The images are all on one line, but the text is next to the images. If we want the images to be on one line, but the text underneath them, we must use a _float-group_ role, like in the following example. [.float-group] -- image::groovy.png[float="left"] image::gradle.png[float="left"] // Define float role, instead of attribute. [.left] image::grails.png[] -- The images above are all grouped together to appear on one line. And the text is not next to the images, but underneath the images, like we wanted.
When we create a HTML document from the Asciidoctor markup we get the following result:
Written with Asciidoctor 1.5.6.1.
