bezahlt von CSS und Elementreihenfolge
Man kann sehr einfach mit CSS auch die Reihenfolge von Elementen ändern. Damit kann man allein schon mit CSS viel an Templates anpassen ohne gleich Twig oder Smarty bemühen zu müssen.
<!DOCTYPE html>
<html>
<head>
<title>element reorder</title>
<style type="text/css">
div#first{
order:3;
-moz-order:3;
}
div#second{
order:1;
-moz-order:1;
}
div#third{
order:2;
-moz-order:2;
}
#main {
display: -webkit-flex; /* Safari */
display: flex;
}
#main div {
width: 70px;
text-align:center;
}
</style>
</head>
<body>
<div id="main">
<div id="first">ONE(3)</div>
<div id="second">TWO(1)</div>
<div id="third">THREE(2)</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>element reorder</title>
<style type="text/css">
div#first{
order:3;
-moz-order:3;
}
div#second{
order:1;
-moz-order:1;
}
div#third{
order:2;
-moz-order:2;
}
#main {
display: -webkit-flex; /* Safari */
display: flex;
}
#main div {
width: 70px;
text-align:center;
}
</style>
</head>
<body>
<div id="main">
<div id="first">ONE(3)</div>
<div id="second">TWO(1)</div>
<div id="third">THREE(2)</div>
</div>
</body>
</html>
| User | annonyme | 2016-11-30 20:07 |
write comment: