diff options
| -rw-r--r-- | src/web/html.md | 6 | ||||
| -rw-r--r-- | src/web/src/figure.html | 99 | ||||
| -rw-r--r-- | src/web/src/grad.png | bin | 0 -> 33635 bytes |
3 files changed, 105 insertions, 0 deletions
diff --git a/src/web/html.md b/src/web/html.md index d3b78ba..0f236ef 100644 --- a/src/web/html.md +++ b/src/web/html.md @@ -30,3 +30,9 @@ ```html {{#include src/tags.html }} ``` + +# Floating figures with caption +[Rendered html](src/figure.html) +```html +{{#include src/figure.html }} +``` diff --git a/src/web/src/figure.html b/src/web/src/figure.html new file mode 100644 index 0000000..ebcdf58 --- /dev/null +++ b/src/web/src/figure.html @@ -0,0 +1,99 @@ +<style> +img { + width: 100%; + height: auto; +} +figure { + width: 20%; +} +</style> + +<!-- EXAMPLE 1 ----------------------------------------------------------------> + +<figure style="float: left;"> + <img src="grad.png"> + <figcaption>Fig 1: wow such colors</figcaption> +</figure> + +<p><i> +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam +faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus +quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl +condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar +etiam non quam lacus suspendisse faucibus interdum posuere. Pulvinar +pellentesque habitant morbi tristique senectus et netus et malesuada. Sem +fringilla ut morbi tincidunt augue interdum. Consectetur purus ut faucibus +pulvinar elementum. Dui faucibus in ornare quam. Sodales ut etiam sit amet +nisl. Nunc scelerisque viverra mauris in aliquam. Nec sagittis aliquam +malesuada bibendum arcu vitae elementum curabitur. +</i></p> + +<figure style="float: right;"> + <img src="grad.png"> + <figcaption>Fig 2: wow such colors again</figcaption> +</figure> + +<p><i> +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam +faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus +quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl +condimentum id venenatis. +</i></p> + +<!-- EXAMPLE 2 ----------------------------------------------------------------> + +<hr style="clear: both"> + +<figure style="float: left;"> + <img src="grad.png"> +</figure> + +Floats can be next to each other on the same height. + +<figure style="float: right;"> + <img src="grad.png"> +</figure> + +<!-- EXAMPLE 3 ----------------------------------------------------------------> + +<hr style="clear: both"> + +<figure style="float: left;"> + <img src="grad.png"> +</figure> + +The css property <code>clear: {left, right, both};</code> controls how elements +should be handled relative to the previous floating element. + +<figure style="float: right; clear: left;"> + <img src="grad.png"> +</figure> + +<p><i> +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam +faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus +quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl +condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar +etiam non quam lacus suspendisse faucibus interdum posuere. +</i></p> + +<!-- EXAMPLE 4 ----------------------------------------------------------------> + +<hr style="clear: both"> + +<div style="overflow: auto; border: 2px solid red;"> +<figure style="float: left;"> + <img src="grad.png"> +</figure> +<code>overflow: auto</code> gives an alternative to <code>clear</code> to +control placement of the floats. The red boarder visualizes the size of the +<code><div></code> block, you can remove the <code>overflow</code> property +and observe how the border changes. +</div> + +<figure style="float: right;"> + <img src="grad.png"> +</figure> diff --git a/src/web/src/grad.png b/src/web/src/grad.png Binary files differnew file mode 100644 index 0000000..0ae458a --- /dev/null +++ b/src/web/src/grad.png |
