css table-cell

Posted 2020-08-05 甜甜圈儿

今天遇到一个样式：图文两列排列。

由于图片大小固定，于是就想到了用table-cell实现。

<div class="container">
　　<div class="box"><img src="demo.png" /></div>
　　<div class="box">
　　　　<p>今天是周四</p>
　　　　<p>今天是9月伊始</p>
　　　　<p>今天是2016年的下半年</p>
　　</div>
</div>

最初css代码如下：

.container{display:table;}
.box{display:table-cell}

但是如果只是简单的这样写，你会发现图片和问题不在同一个水平线上。