使用inline-block布局

横向布局时一般有两种方式：

1）float方式：一般建议用于文字环绕或者其它特定的场合，使用此方式需要解决很多副作用，比较麻烦；

2）inline-block方式：布局建议还是使用inline-block，常用css库purecss等均采用此方式。

以等分4栏为例：

默认的inline-block元素间会有空格或者换行元素的间隙，使用font-size: 0px解决这个间隔问题，在子inline-block元素内部使用font-size: medium恢复字体大小；

.grid {
    font-size: 0px;
}
.col {
    display: inline-block;
    font-size: medium;
    width: 25%;
}

<div class="grid">
    <a class="col">
        Colume 1
    </a>
    <a class="col">
        Colume 2
    </a>
    <a class="col">
        Colume 3
    </a>
    <a class="col">
        Colume 4
    </a>
</div>

在目前主流浏览器Firefox、Chrome、Edge、IE8等浏览器中表现OK，但是在IE8的IE7标准模式还是有间距，会产生第四栏折行问题。这个问题可通过letter-spacing的定义来修复。

.grid {
    font-size: 0px;
    letter-spacing:-.31em;
}
.col {
    display: inline-block;
    font-size: medium;
    width: 25%;
    letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto; zoom:1
}

更多资料

https://www.jianshu.com/p/9fb9697832a0

https://www.cnblogs.com/Ry-yuan/p/6848197.html

https://www.cnblogs.com/coco1s/p/4024445.html

首页 » 使用inline-block布局

相关内容