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

[sneezry]

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

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

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

示意图如下：



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

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

[sneezry]

@jarlyyn 我应该是 clear 的属性理解的不对，滚去翻 w3c 文档了……另外刚刚我有点主观了，向同学道歉~显然 25L 的实现更加优雅！

[jarlyyn]

@sneezry

不是应该是 23 楼么……

[sneezry]

@jarlyyn 哈哈， 23L 不是我吗……精彩答案在 25L~

[jarlyyn]

@sneezry
估计有人被我 block 了，楼层显示不对……

[sneezry]

@jarlyyn block 似乎不影响楼层号啊 O.O

[iNaru]

<img align=left src>

[marvinwilliam]

受教了，顶一下

[paledream]

学习了

[MinonHeart]

@kfll
---------------------------
#img-3 {
width: 64px;
}
---------------------------

为什么不用 width ，你是知道这在 Chrome 有问题的嘛 (^・ω・^ )

[MinonHeart]

[g0thic]

这写法的确是黑科技。。还可以试试 flex 或许能想出更优雅的方法

[jiyinyiyong]

代码问题最好还是在 SegmentFault 问, 贴代码都方便一点.

如果我们遇到这种需求, 基本上跟设计师要求调整设计了.
同样的卡片呈现不同的样式, 时间信息的位置也跳来跳去, 有没有考虑清楚用户的感受.
而且短文本突然出现一个折行, 影响阅读也比较明显.

[maplerecall]

@jiyinyiyong 严重同意，遇到这种需求我们是会去找设计和产品撕的，怎么想都不合理，不仅难看，即使用 25l 黑科技实现了 html 代码也脏脏的~