前端的同学们来一起开动脑筋

[sneezry]

今天公司有一个 task ，在展示文章列表时，如果某个文章有缩略图，那么 summary 环绕缩略图排布。这是一个非常简单的问题， float:left 完美解决。但是，难点是在 summary 后面要跟着一行 post meta ，显示作者、评论数等等，没有缩略图时， post meta 直接跟着 summary 就可以了，但是，有缩略图时就会略显繁琐，分两种情况：

1 、 summary 完全包围的缩略图， post meta 还是紧跟着 summary

2 、 summary 没有完全包围缩略图， post meta 单独一行和图片底部对齐

示意图如下：



大家开动脑筋，不允许用 js ，看看如何实现。

今天下班前我憋出了一个 hack 方法，一会把整个过程写在博客里分享给大家。

[sox]

这个有意思，坐等菊苣们解答

[emric]

http://jsfiddle.net/sehfo7mj/

[emric]

一个手快，把 body 的属性打错了。忽略忽略。

[sox]

楼上亮了 233

[sox]

@emric 233 打错了你改了就会同步吧

[sneezry]

@emric 别闹，图的高度是不固定的

[it1989]

难道是我理解错了？
这个首页看看，是不是这样？
http://blog.isz5.com/

[sneezry]

@it1989 这样是不是更清晰些：

[jarlyyn]

不用 js 叫什么前端，叫切图的……

[raincious]

蓝色的不知道。你可能需要固定主文字的高度。

然后是否包裹的问题只是简单的 BFC 问题，大概就像是这样：

<cover layer>
<image layer style="width: 100px; float: left;" />
<content layer style="overflow: auto;">
TEXT HERE
</content layer>
</cover layer>

[sox]

@jarlyyn 你造吗 有时候大侠喜欢让你一只脚

[sneezry]

@jarlyyn 喷的好！

[m939594960]

我感觉就是一个 min-height 的属性的问题

[sneezry]

@m939594960 并不是，因为图的高度是不固定的，从高度入手应该行不通

[sox]

@raincious 你和二楼应该是一样的。。

[Bijiabo]

https://jsfiddle.net/bijiabo/pz5ebLt2/
感觉实现比较蠢。。。轻喷。。

[Bijiabo]

贴错。。。 https://jsfiddle.net/bijiabo/pz5ebLt2/2/

[jarlyyn]

另外本地测试了下，给文字部分加个 min-height 不就好了

hack 是为了不支持 min-height 的浏览器么……

[Bijiabo]

基于 sneezry 的修改，希望不要介意 @@...

[raincious]

@sox 是嘛？发帖前没看，抱歉。

其实这个问题解决方法很多，甚至拿 position absolute 都可以。关键点是只要能让 Cover 外面的层的高度扩展到和图片一样大就行了。

剩下的就是解决 meta 数据遮挡 content text 的问题了。这个无法彻底避免，但是利用 text-overflow 和 box-shadow 能够尽量让这种遮盖不是十分唐突。

当然我还是想看楼主的 Hack 哈。