diff options
author | johannst <johannst@users.noreply.github.com> | 2024-03-19 23:17:46 +0000 |
---|---|---|
committer | johannst <johannst@users.noreply.github.com> | 2024-03-19 23:17:46 +0000 |
commit | 3f3ba03ab0832ee382166aa37ce923631eeb10e4 (patch) | |
tree | e5e06f4c8fd41aa2a3233f5d3a3d9a5826885ed2 /print.html | |
parent | 301c57576bd03caddf6493afaa8649a155897ae2 (diff) | |
download | notes-3f3ba03ab0832ee382166aa37ce923631eeb10e4.tar.gz notes-3f3ba03ab0832ee382166aa37ce923631eeb10e4.zip |
deploy: 5590e4c45bb868a8fa4610a1273ad131a3ee6354
Diffstat (limited to 'print.html')
-rw-r--r-- | print.html | 102 |
1 files changed, 102 insertions, 0 deletions
@@ -6249,6 +6249,108 @@ window.onload = () => { <div class = "content arm x86">arm x86</div> <div class = "content x86">x86</div> </code></pre> +<h1 id="floating-figures-with-caption"><a class="header" href="#floating-figures-with-caption">Floating figures with caption</a></h1> +<p><a href="web/src/figure.html">Rendered html</a></p> +<pre><code class="language-html"><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>&ltdiv&gt</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> +</code></pre> <div style="break-before: page; page-break-before: always;"></div><h1 id="css"><a class="header" href="#css">css</a></h1> <h2 id="selector"><a class="header" href="#selector">selector</a></h2> <p><code>.moose</code> element with class</p> |