在寫項目的時候有這么一個需求：需要一個框后面帶一個按鈕悍引，當(dāng)時我就想恩脂，so easy 兩個div 拼一下，但是實現(xiàn)的時候發(fā)現(xiàn) 前面的那個 input 框?qū)挾炔皇呛芎每刂迫そ铮绻粹o寬度變化俩块，有需要重新去調(diào)。 [- -||]
想到的第一種方法是：將兩個都放在一個 position: relative 的容器中浓领，按鈕浮動在上層玉凯，下面的 input 100%寬度，然后設(shè)置padding联贩。
但我看網(wǎng)上 ui 插件源碼的時候發(fā)現(xiàn)了一個簡單卻沒有用過的方式（當(dāng)時看的是 vue 的 ui 庫 [iview] (https://www.iviewui.com/components/input]),用的是元素的 display：table 屬性（父元素）漫仆，子元素都是 display: table-cell 屬性。
結(jié)構(gòu)是這樣的：
其中 login-modal-input 也就是組件容器的樣式：
.login-modal-input {
display: table;
width: 100%;
border-collapse: separate;
}
主要的元素 input 的寬度必須設(shè)置 width: 100%, 這里不會占滿整個父元素泪幌，但會將input 框的寬度盡量拉大:
.login-modal-input input {
width: 100%;
display: table-cell;
}
而按鈕部分：
.login-modal-input .append-box {
display: table-cell
}
最終盲厌。署照。
在不能用 flex 布局的情況下，table 倒是替代 flex 的部分功能吗浩。不過坑爹指出也是蠻多的建芙，有些樣式修改起來也是。
相關(guān)資料：
我所知道的幾種display:table-cell的應(yīng)用
大神的空間 display: table 以及 display: table-cell 可以再 ie8+ 中使用懂扼，效果類似于 display: flex岁钓，但是沒有flex 功能強大。
布局神器(一)display:table-cell
