Différences

Ci-dessous, les différences entre deux révisions de la page.

--- info:multicols [2016/05/11 11:13] – créée radeff
+++ info:multicols [2024/01/17 09:07] (Version actuelle) – [Multicols / multicol] radeff
@@ Ligne 3: / Ligne 3: @@
 onglet = tabbed document interface (TDI) or Tab
+<code js>
+#multicol {
+	width: 90%;
+	-webkit-columns: 2 auto;
+	-moz-columns: 2 auto;
+	columns: 2 auto;
+	-moz-column-gap: 40px;
+	-webkit-column-gap: 40px;
+	column-gap: 40px;
+}
+</code>
-  * http://www.journaldunet.com/developpeur/client-web/tutoriel-css3-multi-column-layout.shtml
+voir aussi: [[info:concrete5:docfred:concrete5multicolumnspagelist|Concrete5: concrete5MulticolumnsPageList]]
-  * http://www.entheosweb.com/tutorials/css/tabs.asp
+===== Demo =====
-  * http://dmouronval.developpez.com/tutoriels/javascript/mise-place-navigation-par-onglets-avec-jquery
-  * http://git.aaronlumsden.com/tabulous.js/
-  * http://www.jqueryrain.com/example/jquery-tabs/
-  * http://www.ultra-fluide.com/ressources/css/menu-onglets.htm
-  * http://www.xul.fr/ecmascript/onglets.php
-voir aussi: [[:info:concrete5:docfred:concrete5multicolumnspagelist|Concrete5: concrete5MulticolumnsPageList]]
+<html>
+<style>
+    #multicol {
+       width: 90%;
+       -webkit-columns: 3 auto;
+       -moz-columns: 3 auto;
+       columns: 3 auto;
+    }
+    </style>
+<div id="multicol">
+Lorem ipsum dolor sit amet, consectetur
+<br />adipisicing elit, sed doeiusmod tempor
+<br />incididunt ut labore et dolore magna aliqua
+<br />Ut enimad minim veniam, quis nostrud
+<br />exercitation ullamco laboris nisi
+<br />utaliquip ex ea commodo consequat
+<br />Duis aute irure dolor inreprehenderit
+<br />in voluptate velit esse cillum dolore
+<br />eu fugiat nullapariatur. Excepteur
+<br />sint occaecat cupidatat non proident,
+<br />sunt inculpa qui officia deserunt
+<br />mollit anim id est laborum.
+<br />Lorem ipsum dolor sit amet, consectetur
+<br />adipisicing elit, sed doeiusmod tempor
+<br />incididunt ut labore et dolore magna aliqua
+<br />Ut enimad minim veniam, quis nostrud
+<br />exercitation ullamco laboris nisi
+<br />utaliquip ex ea commodo consequat
+<br />Duis aute irure dolor inreprehenderit
+<br />in voluptate velit esse cillum dolore
+<br />eu fugiat nullapariatur. Excepteur
+<br />sint occaecat cupidatat non proident,
+<br />sunt inculpa qui officia deserunt
+<br />mollit anim id est laborum.
+</div>
+</html>