Помимо горизонтальности используется 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 Комментарии。