CSS多种布局方式自我实现-水平布局(二)

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

一、概述

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

二、HTML





  
  JS Bin


  
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

三、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("");
$(".cell").wrap("
");

五、结果展示

CSS多种布局方式自我实现-水平布局(二)_第1张图片
水平布局示例

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

  1. How To Create a Horizontally Scrolling Site

你可能感兴趣的:(CSS多种布局方式自我实现-水平布局(二))