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

左岸

web前端

 
 
 

日志

 
 

两端对齐的布局  

2014-06-11 15:24:26|  分类: 兼容性 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
对于内容展示类型的模块,如果内容块的宽度需要固定,最终就会变成两端对齐的布局(空隙自适应)。这样的布局在固定宽度的容器中可以简单的使用margin来实现。但现代Web的响应式设计对自适应宽度的需求非常高,因此我们可能需要真正的两端对齐布局。
  首先,text-align属性有个justify的取值,这个取值就是用于两端对齐的。比如运行<div style="text-align:justify;width:15em;border:1px solid #CCC;">
  blahblahblah blahblah blah blah
  blahblah blah blahblah blah blah blah blah
  blahblahblahblahblahblahblah
</div>
  这个例子中前三行单词中的间隙是自适应的。也就是说,当单词不足以放在一行上而被自动换行时(使用BR换行不会产生),原来那行就会被两端对齐。于是我们只要制造这样的场景就可以使需要的内容两端对齐。
运行<style>
ol {
  list-style
:none;
  padding
:10px;
  border
:1px solid #CCC;
  text-align
:justify;
}
li {
  border
:1px solid #CCC;
  display
:inline-block;
  width
:64px;height:64px;
  line-height
:64px;
  text-align
:center;
}
/*在最后放置一个元素,为了使前面的行自动换行*/
ol:after {
  content
:'';
  width
:100%;
  display
:inline-block;
}
</style>
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>
两端对齐的布局 - sssxiaoliya - 左岸
  虽然基本上是实现了,但在不同浏览器上还存在一点兼容性差异。Chrome中用于换行的空格会占一个字符位置,使得最后一个元素的右边空出了一块空格。这个问题可以通过去掉OL内末尾的空白字符来解决(一个简单的方法是不写最后一个LI结束标签)。
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4
</ol>
两端对齐的布局 - sssxiaoliya - 左岸
  IE8的问题是行盒子的最小高度问题。这个问题的一般解决方法是font-size:0px,但如果这么做的话text-align:justify就会失效,因为用于分割内容块之间的空白字符没了。这时可以使用font-size:1pxline-height:0来解决。一下是最终代码
运行<style>
ol {
  list-style
:none;
  padding
:10px;
  border
:1px solid #CCC;
  text-align
:justify;
  font
:1px/Simsun;
}
li {
  font
:14px/64px Simsun;
  border
:1px solid #CCC;
  display
:inline-block;
  width
:64px;height:64px;
  text-align
:center;
}
ol:after {
  content
:'';
  width
:100%;
  display
:inline-block;
}
</style>
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4
</ol>
两端对齐的布局 - sssxiaoliya - 左岸
两端对齐的布局 - sssxiaoliya - 左岸
  评论这张
 
阅读(28)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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