图文混排布局的一个Tip

[jiangshanmeta]

如果想实现一个左图右文布局，可以使用浮动，这是很普遍的一点。但是如果如果右侧文字很少，会显得右侧很空，这时候我们会希望一部分文字能够拿到下面来，文字底部和图片齐平，显然浮动无法实现（这也是bootstrap3的网格布局一个很糟心的地方）。我们很自然会想到使用等高布局。等高布局比较靠谱的解决方案是利用css table，利用同一行中单元格等高这一特性来实现。但是说实话table真的很难驯服，再加上图文混排出幺蛾子的概率很高。如果按照默认样式的可能是这样的：

要实现上面的结果其实还做过一些处理，因为图可能很大，但是我只希望图片区占有一定比例，其他的所以采用table-layout:fixed属性加上百分比的宽度。

为什么文字会这么靠下呢，因为vertical-align属性默认值为baseline,把右侧文字区的vertical-align设为top就好了。然后想放在下面的文字绝对定位就好了，别忘了给右侧文字区域加上position:ralative，基本常识了。

这样基本上差不多了，可以上demo了。

稍微精益求精的可以发现左侧图片区的高度比图片高度大那么一点，换句话说就是图片下面还有一定空间，这一因为行高，可行的解决方案有如下几个

1. 图片设置为display:block;
2. 左侧图片区行高设置line-height:0;
3. 左侧图片vertical-align设置为top || bottom || middle

看到一篇文章是讲这一类布局的，还起了一个高大上的名字叫做媒体对象，话说bootstrap里也有类似实现。里面也提到了这种利用table布局的方式。