注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

大耳花蜗牛

 
 
 

日志

 
 
关于我

爱拍照的月半子。个人摄影公众号'JCK设影室' (ID: axdesign)

网易考拉推荐

CSS布局之"固定宽度布局"  

2014-05-20 16:09:11|  分类: 前端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
多栏布局有三种基本实现方案:固定宽度、流动、弹性。其中弹性布局过于复杂而且当前浏览器对其支持并不好,所以在CSS布局系列日志中就只写固定宽度和流动两种布局方式。这里都以三栏为基准,因为如果掌握了三栏布局,其它多少栏都不是问题。

固定布局宽度
目前而言,一般固定宽度为900到1100像素,而且其大小不会随着浏览器窗口大小而变化。其中960像素是最常见的,因为这个宽度适合所有现代浏览器且能被16、12、10、8、6、5、4和3整除,容易计算分栏数量且计算结果都为整数。链接:960网格

三栏-固定宽度布局
分三栏(看似)很简单,只需要设定出三个栏然后分别设置其宽度保证其宽度总和为固定宽度就可以了,当然,别忘了需要设置float属性!之所以刚才说"看似哦"是因为有时候你一不小心就发现右边栏滑到了左边栏下方。通常或有两种可能会导致此情况:
  • 添加了内/外边距导致布局加宽进而浮动到下面。换句话说,右边没有了足够的并列空间。因此要确保三栏宽度(包括所有内外边距)相加等于固定布局总宽度才可!详见下一标题内容。

  • 在栏中添加了超过布局宽度的图片或没有空格的长字符串(如URL)也会导致栏宽超过布局宽度。解决方法如下:
           1.添加一条.inner img{max-width:100%;}声明(假设内部div类名为inner),这样图片宽度就不会超过其父元素。
           2.给内部div添加 .inner{overflow:hidden;}声明,超出容器部分将被剪掉。(这个不太推荐)
           3.对于长字符串添加word-wrap:break-word声明。提示:该规则只在需要时起作用,但是是随机断句。

给栏设置内边距
这里只列举了内边距的添加,外边距和边框同理,只是要记得把外边距跟边框宽度算进栏宽里就OK。这里同样有两种主要方法:

  • 为内部元素应用内边距/外边距/边框(这是目前比较主流的方法)
    此方法是在内部为所有元素添加一个总div,然后对这个div施加边距。注意:不是对外部的html元素施加,因为为固定宽度元素(ariticle)添加水平外边距、边框和内边距会导致盒子变宽。

    CSS布局之固定宽度布局 - 大耳花蜗牛 -


  • 使用box-sizing:border-box
    此声明是CSS3新添属性。这是最简单的一个办法。只要给三个浮动的栏分别加上此声明,那么再给栏添加内边距(和边框)就不会导致盒子的宽度变化了。此时添加内边距的结果就是内容自动收缩,而无须使用内部div标记。代码如下:

    article{
    box-sizing:border-box;
    width:600px;
    float:left;
    background:#ffed53;
    padding:10px 20px; }


  评论这张
 
阅读(85)| 评论(8)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017