CSS多种布局方式自我实现-水平布局（二）

注：本文章参考自 How To Create a Horizontally Scrolling Site

一、概述

为了设计宽度自适应的水平布局，原作者采用的CSS+JQ的方法，本文是对该方法的实践，所有理论及操作援引自原文章。
如果设置一个很大的静态宽度，不利于扩展；使用float无法解决行末块元素自动换行的问题；直接使用table则非语义化（non-semantic）；最后选择使用JQ来为原HTML最后包装table，既保证了原HTML的语义化，又实现了水平布局。

二、HTML

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <article class="cell">this is article 1 this is article 1 this is article 1 this is article 1 this is article 1 this is article 1 this is article 1 this is article 1 this is article 1 this is article 1</article>
  <article class="cell">this is article 2 this is article 2 this is article 2 this is article 2 this is article 2 this is article 2 this is article 2 this is article 2 this is article 2 this is article 2</article>
  <article class="cell">this is article 3 this is article 3 this is article 3 this is article 3 this is article 3 this is article 3 this is article 3 this is article 3 this is article 3 this is article 3</article>
  <article class="cell">this is article 4 this is article 4 this is article 4 this is article 4 this is article 4 this is article 4 this is article 4 this is article 4 this is article 4 this is article 4</article>
  <article class="cell">this is article 5 this is article 5 this is article 5 this is article 5 this is article 5 this is article 5 this is article 5 this is article 5 this is article 5 this is article 5</article>
  <article class="cell">this is article 6 this is article 6 this is article 6 this is article 6 this is article 6 this is article 6 this is article 6 this is article 6 this is article 6 this is article 6</article>
  <article class="cell">this is article 7 this is article 7 this is article 7 this is article 7 this is article 7 this is article 7 this is article 7 this is article 7 this is article 7 this is article 7</article>
  <article class="cell">this is article 8 this is article 8 this is article 8 this is article 8 this is article 8 this is article 8 this is article 8 this is article 8 this is article 8 this is article 8</article>
  <article class="cell">this is article 9 this is article 9 this is article 9 this is article 9 this is article 9 this is article 9 this is article 9 this is article 9 this is article 9 this is article 9</article>
  <article class="cell">this is article 10 this is article 10 this is article 10 this is article 10 this is article 10 this is article 10 this is article 10 this is article 10 this is article 10 this is article 10</article>
  <article class="cell">this is article 11 this is article 11 this is article 11 this is article 11 this is article 11 this is article 11 this is article 11 this is article 11 this is article 11 this is article 11</article>
  <article class="cell">this is article 12 this is article 12 this is article 12 this is article 12 this is article 12 this is article 12 this is article 12 this is article 12 this is article 12 this is article 12</article>
  <article class="cell">this is article 13 this is article 13 this is article 13 this is article 13 this is article 13 this is article 13 this is article 13 this is article 13 this is article 13 this is article 13</article>
  <article class="cell">this is article 14 this is article 14 this is article 14 this is article 14 this is article 14 this is article 14 this is article 14 this is article 14 this is article 14 this is article 14</article>
  <article class="cell">this is article 15 this is article 15 this is article 15 this is article 15 this is article 15 this is article 15 this is article 15 this is article 15 this is article 15 this is article 15</article>
  <article class="cell">this is article 16 this is article 16 this is article 16 this is article 16 this is article 16 this is article 16 this is article 16 this is article 16 this is article 16 this is article 16</article>
  <article class="cell">this is article 17 this is article 17 this is article 17 this is article 17 this is article 17 this is article 17 this is article 17 this is article 17 this is article 17 this is article 17</article>
  <article class="cell">this is article 18 this is article 18 this is article 18 this is article 18 this is article 18 this is article 18 this is article 18 this is article 18 this is article 18 this is article 18</article>
  <article class="cell">this is article 19 this is article 19 this is article 19 this is article 19 this is article 19 this is article 19 this is article 19 this is article 19 this is article 19 this is article 19</article>
  <article class="cell">this is article 20 this is article 20 this is article 20 this is article 20 this is article 20 this is article 20 this is article 20 this is article 20 this is article 20 this is article 20</article>
</body>
</html>

三、CSS代码

*{
  padding:0;
  margin:0;
}
body{
  font-size:62.5%;
  background-color: #f00;
}
.cell{
  width:200px;
  border:1px solid #0f0;
}
tr{
  vertical-align:top;
}

四、JQ代码

$("#page-wrap").wrapInner("<table cell-spacing=30><tr>");
$(".cell").wrap("<td>");

五、结果展示

水平布局示例

注意上图下方有滚动条，同时此页面竖直方向上可自由扩展，水平布局完成。

How To Create a Horizontally Scrolling Site