3522vip-新葡萄京官网-www.35222.com
做最好的网站
当前位置:3522vip > 照明工业 > CSS3页面布局方案

CSS3页面布局方案

文章作者:照明工业 上传时间:2019-10-03

日前,在党的生日到来之际,为了纪念建党95周年,进一步增强党组织的凝聚力和战斗力,中国照协全体党员及副秘书长以上人员参加了中国轻工业联合会党委举办的“七一”主题教育活动。 图片 1

左侧边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

中国

右侧边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

   盒布局与多栏布局的区别:使用多栏布局时,各栏宽度必须是相等的,在指定每栏宽度时,也只能为所有栏指定一个统一的宽度,栏与栏之间的宽度不可能是不一样的。

   3. 使用自适应窗口的弹性盒布局,假如我想左右两侧固定,中间自适应,可以使用box-flex属性.

   比如HTML代码如下:

<div class="container3">      <div class="left-sidebar3">          <h2>左侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>      <div class="contents3">          <h2>内容</h2>          <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>      </div>      <div class="right-sidebar3">          <h2>右侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>  </div>

CSS代码如下:

.container3 {display:-moz-box;display:-webkit-box;}  .left-sidebar3 {width:200px;padding:26px;background-color:orange;}  .right-sidebar3 {width:200px;padding:26px;background-color:limegreen;}  .contents3 {-moz-box-flex:1;-webkit-box-flex:1;padding:26px;background-color:yellow;}

demo演示如下:

中国

右侧边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

 2. 在css3中,通过box属性来使用盒布局。使用盒布局如下:

HTML代码如下:

<div class="container2">      <div class="left-sidebar2">          <h2>左侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>      <div class="contents2">          <h2>内容</h2>          <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>      </div>      <div class="right-sidebar2">          <h2>右侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>  </div>

CSS代码如下:

.container2 {display:-moz-box;display:-webkit-box;}  .left-sidebar2 {width:200px;padding:26px;background-color:orange;}  .right-sidebar2 {width:200px;padding:26px;background-color:limegreen;}  .contents2 {width:280px;padding:26px;background-color:yellow;}

demo演示如下:

中国

使用float属性或者position属性的布局缺点

示列文字1:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

示列文字2:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

页面中其他内容

如果在上面中的类名为div1下加一张图片的话,那么上面的demo演示变成如下面的了!

中国

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

中国

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我


图片 2

<div style="width:100%;overflow:hidden;" id="div-st">      <h2 style="border-bottom:1px solid #333;">使用float属性或者position属性的布局缺点</h2>      <div class="div1">              <p>示列文字1:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>      </div>      <div class="div2">          <p>示列文字2:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>      </div>      <div class="div3">页面中其他内容</div>  </div>

图片 3

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

中国

右侧边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

 4. 改变元素的显示顺序--可以通过box-ordinal-group属性来改变各元素的显示顺序,可以在每个元素的样式中加入box-ordinal-group属性,该属性使用一个表示序号的整数属性值,浏览器在显示的时候根据该序号从小到大来显示这些元素。

 比如如下HTML代码:

<div class="container4">      <div class="left-sidebar4">          <h2>左侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>      <div class="contents4">          <h2>内容</h2>          <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>      </div>      <div class="right-sidebar4">          <h2>右侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>  </div>

CSS代码如下:

.container4 {display:-moz-box;display:-webkit-box;}  .left-sidebar4 {width:200px;padding:26px;background-color:orange;-moz-box-ordinal-group:3;-webkit-box-ordinal-group:3;}  .right-sidebar4 {width:200px;padding:26px;background-color:limegreen;-moz-box-ordinal-group:2;-webkit-box-ordinal-group:2;}  .contents4 {-moz-box-flex:1;-webkit-box-flex:1;padding:26px;background-color:yellow;-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1;}

demo演示如下:

中国 图片 4

左侧边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

图片 5

左侧边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

中国

     Web页面中的布局,在css3之前,主要使用float属性或者position属性进行页面中的简单布局,但是使用它们也存在一些缺点,比如两栏或者多栏中如果元素的内容高度不一致,则有底部很难对齐的问题。因此在css3中追加了一些新的布局方式,使用这些新的布局方式,除了可以修改之前存在的问题之外,还可以进行更为便捷,更为复杂的页面布局。

图片 6

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

中国

CSS3页面布局方案

第3天
2015-08-03

CSS代码如下:

图片 7

.div1,.div2,.div3 {float:left;width:26em;}  div.div1 {margin-right:2em;}  div.div3 {width:100%;background-color:yellow;height:260px;}

中国

     我们可以先来看看传统使用float或者position属性布局页面;如下HTML代码:

中国

左侧边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

中国

右侧边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

 5.  改变元素的排列方向--使用弹性盒布局的时候,我们可以很简单地将多个元素的排列方向从水平方向修改为垂直方向,或者从垂直方向修改为水平方向,在css3中,使用box-orient来指定多个元素的排列方向

HTML代码如下:

<div class="container5">      <div class="left-sidebar5">          <h2>左侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>      <div class="contents5">          <h2>内容</h2>          <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>      </div>      <div class="right-sidebar5">          <h2>右侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>  </div>

CSS代码如下:

.container5 {display:-moz-box;display:-webkit-box;-moz-box-orient:vertical;-webkit-box-orient:vertical;}  .left-sidebar5 {padding:26px;background-color:orange;-moz-box-ordinal-group:3;-webkit-box-ordinal-group:3;}  .right-sidebar5 {padding:26px;background-color:limegreen;-moz-box-ordinal-group:2;-webkit-box-ordinal-group:2;}  .contents5 {-moz-box-flex:1;-webkit-box-flex:1;padding:26px;background-color:yellow;-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1;}

demo演示如下:

图片 8

使用float属性或者position属性的布局缺点

图片 9

示列文字1:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

示列文字2:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

页面中其他内容

     如上所示:使用float属性或position属性进行页面布局时有一个比较明显的缺点,就是第一个div元素与第二个div元素是各自独立的,因此如果在第一个div元素中加入一些内容的话,将会使得两个元素的底部不能对齐,导致页面中多处一块空白区域。

    使用多栏布局可以解决上面的问题。下面我们一步步来,如下:

    1.首先我们先定义个div盒子.

       HTML代码如下:

<div class="box">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

       CSS代码如下:

.box {width:600px;background-color:yellow;}

效果如下:

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

    2.使用多栏布局的第一个属性:column-count,column-count属性为一个数字表示列数,不带单位,含义是将一个元素中的内容分为多栏进行显示。

HTML代码

<div class="box2">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下:

.box2 {width:600px;background-color:yellow;-moz-column-count:2;-webkit-column-count:2;}

效果演示如下:

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

     3.使用多栏布局的第二个属性:column-gap,使用column-gap属性来设定多栏之间的间隔距离。

      HTML代码如下:

<div class="box3">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下:

.box3 {width:600px;background-color:yellow;-moz-column-count:2;-webkit-column-count:2;-moz-column-gap: 60px;-webkit-column-gap: 60px;}

效果演示如下:

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

  4. 使用多栏布局的第三个属性:column-rule,column-rule属性在栏与栏之间增加一条间隔线,并且设定该间隔线的宽度,样式,颜色,该属性的指定方法与css中的border属性指定方法相同。

HTML代码如下:

<div class="box4">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下:

.box4 {width:600px;background-color:yellow;-moz-column-count:2;-webkit-column-count:2;-moz-column-gap: 60px;-webkit-column-gap: 60px;-webkit-column-rule: 5px dashed #000;-moz-column-rule: 5px dashed #000;} 

效果演示如下:

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

 下面我们综合来看下 "使用多栏布局方式" 的demo如下:

HTML代码如下:

<div style="width:100%;overflow:hidden;" id="div-nd">      <h2 style="border-bottom:1px solid #333;">使用多栏布局方式</h2>      <div class="div1-nd">          <img src="http://m3.img.srcdd.com/farm4/d/2015/0228/21/88B00EB1D65E0890DDB5E032BA892AC2_B500_900_110_110.jpeg"/>          <p>示列文字1:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>          <p>示列文字2:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>      </div>      <div class="div3-nd">页面中其他内容</div>  </div>

CSS代码如下:

div.div1-nd {/*width:52em;*/-moz-column-width:26em;-webkit-column-width:26em;-moz-column-count:2;-webkit-column-count:2;}  div.div3-nd {width:100%;background-color:yellow;height:260px;}

效果演示如下:

效果请点击demo

 使用多栏布局如上图,虽然解决了两块元素对齐的问题,但是我个人觉得2块区域并不是独立的,第一块内容到了第二块内容上来了。

使用float属性或position属性时的缺点---盒布局

  在css3中,除了上面的多栏布局之外,还可以使用盒布局解决前面所说的使用float属性或position属性时左右两栏或多栏中底部不能对齐的问题.

  1. 比如我们先来看下传统的demo,HTML代码如下:

<div class="container">      <div class="left-sidebar">          <h2>左侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>      <div class="contents">          <h2>内容</h2>          <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>      </div>      <div class="right-sidebar">          <h2>右侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>  </div>

CSS代码如下:

.left-sidebar {float:left;width:200px;padding:26px;background-color:orange;}  .right-sidebar {float:left;width:200px;padding:26px;background-color:limegreen;}  .contents {float:left;width:240px;padding:26px;background-color:yellow;}  .container {width:100%;overflow:hidden;}

演示如下:

中国

左侧边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

中国

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

图片 10

实现效果如下:

图片 11

中国

中国

中国

图片 12

图片 13

图片 14 图片 15 图片 16 图片 17 图片 18 图片 19 图片 20 图片 21 图片 22 图片 23 图片 24 图片 25 图片 26 图片 27 图片 28 图片 29 图片 30 图片 31 图片 32 图片 33 图片 34 图片 35 图片 36 图片 37 图片 38 图片 39 图片 40 图片 41 图片 42 图片 43 图片 44 图片 45 图片 46 图片 47 图片 48 图片 49 图片 50 图片 51 图片 52 图片 53 图片 54 图片 55 图片 56 图片 57 图片 58 图片 59 图片 60 图片 61 图片 62 图片 63 图片 64 图片 65 图片 66 图片 67 图片 68 图片 69

图片 70

中国

中国

图片 71

中国

图片 72

图片 73

中国

图片 74

图片 75

中国

第1天
2015-08-01

图片 76

中国

中国

中国

中国

中国

图片 77

图片 78

图片 79

图片 80

中国

图片 81

图片 82

图片 83

图片 84

图片 85

中国

图片 86

中国

中国

中国

图片 87

中国

图片 88

中国

图片 89

图片 90

中国

中国

中国

图片 91

中国

中国

图片 92

图片 93

图片 94

图片 95

图片 96

中国

第2天
2015-08-02

中国

图片 97

图片 98

中国

图片 99

中国

中国

图片 100

图片 101

图片 102

图片 103

图片 104

中国

中国

中国 图片 105

图片 106

中国

中国

中国

图片 107

中国

图片 108

图片 109

中国

图片 110

图片 111

中国

图片 112

中国

图片 113

中国

中国

中国

图片 114

中国

中国

图片 115

图片 116

中国

中国

中国

图片 117

中国

图片 118

中国

中国

中国

图片 119

图片 120

中国

图片 121

图片 122

图片 123

本文由3522vip发布于照明工业,转载请注明出处:CSS3页面布局方案

关键词: 3522vip