Web 技术研究所

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

关于inline-block布局

  在HTML4的时代,想对元素居中,margin:auto是不管用的。block的元素不响应text-align:center,而inline又不能固定大小,因此inline-block是解决问题的最有方法。当然,当时主流的还是表格布局,如果使用表格布局就不有这个问题,inline-block布局无论是以前还是现在都不是主流。
  所谓布局,就是控制元素的位置。对于流体布局来说,只要能让元素横向排列和纵向排列就是一种布局了。而inline-block就是一种让元素横向排列的方法。block元素会占一整行,而inline-block有和block一样设置大小的功能,并且还可以不占一整行。不过在使用它的时候会有一些兼容性问题。在IE6、7中,如果元素的默认显示方式是block的,那么display:inline-block就会失效。这可以说是一个BUG,但是这个问题很容易解决。因为IE6、7中hasLayout的元素是可以设置大小的,所以对inline元素hasLayout就可以做到inline-block的功能。 <!DOCTYPE>
<style>
.panel {border:1px solid green;}
.panel div {
  width:100px;height:100px;margin:10px;
  border:1px solid red;
  display:inline-block;
  /*兼容IE6、7*/
  *display:inline;
  *zoom:1;
}
</style>
<div class="panel">
  <div></div>
  <div></div>
  <div></div>
</div>

  效果就是就是这样,它会把容器元素撑开,这是个优点,不像float还需要加个清除浮动。但是它也有缺点,就是元素的间距会多出一个空格,因为inline-block和中间的inline空文本节点接触的时候会出现一个空格。这个空格经常都是我们不想要的,所以我们要想办法把它干掉。
  我觉得最方便的就是font-size:0px了,文字大小为0当然就显示不了文字了但是容器如果加了font-size:0px,内部的元素要加上相应的font-size,因为这个属性是可继承的。也许你会很在乎,这个方法会不会有兼容性问题呢?我曾经也一直担心这件事情,后来发现担心完全是多余的,虽然font-size在IE6、7下的最小值为1px,但是IE6、7下本身不会出现多余空格问题,所以正好font-size可以解决所有问题。
<!DOCTYPE>
<style>
.panel {border:1px solid green;font-size:0px;}
.panel div {
  width:100px;height:100px;margin:10px;
  border:1px solid red;
  display:inline-block;
  /*内部需要font-size来修正容器的font-size:0px*/
  font:14px/100px 微软雅黑;text-align:center;
  /*兼容IE6、7*/
  *display:inline;
  *zoom:1;
}
</style>
<div class="panel">
  <div>次碳酸钴</div>
  <div>次碳酸钴</div>
  <div>次碳酸钴</div>
</div>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^