Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

两端对齐的布局

  对于内容展示类型的模块,如果内容块的宽度需要固定,最终就会变成两端对齐的布局(空隙自适应)。这样的布局在固定宽度的容器中可以简单的使用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>

  虽然基本上是实现了,但在不同浏览器上还存在一点兼容性差异。Chrome中用于换行的空格会占一个字符位置,使得最后一个元素的右边空出了一块空格。这个问题可以通过去掉OL内末尾的空白字符来解决(一个简单的方法是不写最后一个LI结束标签)。
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4
</ol>

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


网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^