CSS多種佈局方式自我實現-水平佈局（二）

weixin_34148340發表於2017-05-11
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>");

五、結果展示

5744176-4702c3cd13aaeda8.png
水平佈局示例

 注意上圖下方有滾動條，同時此頁面豎直方向上可自由擴充套件，水平佈局完成。

  1. How To Create a Horizontally Scrolling Site

相關文章