css 之 display: table & table-cell 的使用

在写项目的时候有这么一个需求：需要一个框后面带一个按钮，当时我就想，so easy 两个div 拼一下，但是实现的时候发现 前面的那个 input 框宽度不是很好控制，如果按钮宽度变化，有需要重新去调。 [- -||]

image.png

想到的第一种方法是：将两个都放在一个 position: relative 的容器中，按钮浮动在上层，下面的 input 100%宽度，然后设置padding。

但我看网上 ui 插件源码的时候发现了一个简单却没有用过的方式（当时看的是 vue 的 ui 库 [iview] (https://www.iviewui.com/components/input]),用的是元素的 display：table 属性（父元素），子元素都是 display: table-cell 属性。

结构是这样的：

结构.png

其中 login-modal-input 也就是组件容器的样式：

.login-modal-input {
  display: table;
  width: 100%;
  border-collapse: separate;
}

主要的元素 input 的宽度必须设置 width: 100%, 这里不会占满整个父元素，但会将input 框的宽度尽量拉大:

.login-modal-input input {
  width: 100%;
  display: table-cell;
}

而按钮部分：

.login-modal-input .append-box {
  display: table-cell
}

最终。。

结果.png

在不能用 flex 布局的情况下，table 倒是替代 flex 的部分功能。不过坑爹指出也是蛮多的，有些样式修改起来也是。

---

相关资料：
我所知道的几种display:table-cell的应用
大神的空间 display: table 以及 display: table-cell 可以再 ie8+ 中使用，效果类似于 display: flex，但是没有flex 功能强大。
布局神器(一)display:table-cell