Помимо горизонтальности используется Foundation.
Описание разных способов создания горизонтальности и пример с таблицами:
<html> <head> <title>Page</title> <link rel="stylesheet" href="foundation/css/normalize.css" /> <link rel="stylesheet" href="foundation/css/foundation.css" /> <script src="js/vendor/custom.modernizr.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.mousewheel.js"></script> <script> $(function(){ $("#page-wrap").wrapInner("<table cellspacing='30'><tr>"); $(".row-wrap").wrap("<td></td>"); $("body").mousewheel(function(event, delta) { this.scrollLeft -= (delta * 30); event.preventDefault(); }); }); </script> </head> <body> <script> document.write('<script src=' + ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + '.js><\/script>') </script> <script src="js/foundation/foundation.js"></script> <script src="js/foundation/foundation.alerts.js"></script> <script src="js/foundation/foundation.clearing.js"></script> <script src="js/foundation/foundation.cookie.js"></script> <script src="js/foundation/foundation.dropdown.js"></script> <script src="js/foundation/foundation.forms.js"></script> <script src="js/foundation/foundation.joyride.js"></script> <script src="js/foundation/foundation.magellan.js"></script> <script src="js/foundation/foundation.orbit.js"></script> <script src="js/foundation/foundation.placeholder.js"></script> <script src="js/foundation/foundation.reveal.js"></script> <script src="js/foundation/foundation.section.js"></script> <script src="js/foundation/foundation.tooltips.js"></script> <script src="js/foundation/foundation.topbar.js"></script> <script src="js/foundation/foundation.interchange.js"></script> <script> $(document).foundation(); </script> <style> tr { vertical-align: top; } .row-wrap { width: 2000px; } </style> <div id="page-wrap"> <div class="row-wrap"><div class="row"> <div class="small-2 large-4 columns">A</div> <div class="small-4 large-4 columns">B</div> <div class="small-6 large-4 columns">C</div> </div></div> <div class="row-wrap"><div class="row"> <div class="large-3 columns">D</div> <div class="large-6 columns">E</div> <div class="large-3 columns">F</div> </div></div> <div class="row-wrap"><div class="row"> <div class="small-6 large-2 columns">G</div> <div class="small-6 large-8 columns">H</div> <div class="small-12 large-2 columns">I</div> </div></div> <div class="row-wrap"><div class="row"> <div class="small-3 columns">J</div> <div class="small-9 columns">K</div> </div></div> <div class="row-wrap"><div class="row"> <div class="large-4 columns">L</div> <div class="large-8 columns">M</div> </div></div> <div class="row-wrap"><div class="row"> <div class="small-6 large-5 columns">N</div> <div class="small-6 large-7 columns">O</div> </div></div> <div class="row-wrap"><div class="row"> <div class="large-6 columns">P</div> <div class="large-6 columns">Q</div> </div></div> </div> </body> </html> |
0 Комментарии。