注：本文章參考自 How To Create a Horizontally Scrolling Site
一、概述
?為了設(shè)計寬度自適應(yīng)的水平布局麦到，原作者采用的CSS+JQ的方法豁辉，本文是對該方法的實踐庶橱，所有理論及操作援引自原文章夷恍。
?如果設(shè)置一個很大的靜態(tài)寬度拱雏，不利于擴展棉安；使用float無法解決行末塊元素自動換行的問題；直接使用table則非語義化（non-semantic）铸抑；最后選擇使用JQ來為原HTML最后包裝table贡耽，既保證了原HTML的語義化，又實現(xiàn)了水平布局鹊汛。
二蒲赂、HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://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>");
五滥嘴、結(jié)果展示
水平布局示例
?注意上圖下方有滾動條，同時此頁面豎直方向上可自由擴展至耻，水平布局完成若皱。
