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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3305 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

示意图如下：

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

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

第 1 条附言 · 2015-11-06 21:18:13 +08:00

请求大家仔细读一下需求，目前为止大家给的答案都和需求不符啊不符！

验证的方法很简单，更改图片尺寸看看是否依然能够正常工作。

第 2 条附言 · 2015-11-06 21:20:09 +08:00

上面的示意图给大家误导了，这个怪我，图的大小不是统一的，请大家参考下面的效果图：

第 3 条附言 · 2015-11-06 22:06:46 +08:00

25L 给出的方法非常优雅！请大家去围观，然后由于我之前对 clear 属性理解得半斤八两，导致我采用了非常 dirty 的方法实现，既然之前说过要和大家分享，也就不怕被大家笑话了，嘻嘻~

http://codepen.io/Sneezry/pen/bVxPGP?editors=110

缩略图

Summary

meta

post

53 条回复 • 2015-11-07 14:10:22 +08:00

sox

2015-11-06 20:12:04 +08:00

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

emric

2015-11-06 20:27:08 +08:00

http://jsfiddle.net/sehfo7mj/

emric

2015-11-06 20:31:49 +08:00

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

sox

2015-11-06 20:32:19 +08:00

楼上亮了 233

sox

2015-11-06 20:34:49 +08:00

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

sneezry

2015-11-06 20:37:50 +08:00

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

it1989

2015-11-06 20:48:59 +08:00

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

sneezry

2015-11-06 20:54:31 +08:00

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

jarlyyn

2015-11-06 21:00:51 +08:00

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

raincious

2015-11-06 21:02:33 +08:00

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

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

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

sox

2015-11-06 21:03:32 +08:00 via Android

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

sneezry

2015-11-06 21:04:00 +08:00

@jarlyyn 喷的好！

m939594960

2015-11-06 21:04:57 +08:00

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

sneezry

2015-11-06 21:06:25 +08:00

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

sox

2015-11-06 21:06:28 +08:00 via Android

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

Bijiabo

2015-11-06 21:07:51 +08:00

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

Bijiabo

2015-11-06 21:09:06 +08:00

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

jarlyyn

2015-11-06 21:09:30 +08:00

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

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

Bijiabo

2015-11-06 21:10:58 +08:00

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

raincious

2015-11-06 21:13:31 +08:00

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

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

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

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

sneezry

2015-11-06 21:13:44 +08:00

@jarlyyn 哎，审题啊同学，不审题肯定给不出正确答案的嘛！图片的高度不固定啊不固定，肿么设置 min-height 啊，这个 min-height 你要给多少哇~

jarlyyn

2015-11-06 21:18:30 +08:00

@sneezry

设计给出这种图能给我骂回去。这种设计不限定图片尺寸？

变高么也简单， post meta 前 clear both,然后 margin-top:-1em 呗。

sneezry

2015-11-06 21:23:04 +08:00

@jarlyyn 因为呢，这个是一个 wp 的 theme ，不能 hard code ，虽然目前图片的宽度都是一样的，但是如果有一天我们要改图片的 width ，那么整个 theme 就都挂了，这种 code 肯定是无法通过我司 code review 的~

sneezry

2015-11-06 21:28:07 +08:00

@Bijiabo 非常赞，但是有个问题，就是 class 用了 hard code ，这样是无法做到自适应的。

kfll

2015-11-06 21:33:54 +08:00

https://jsbin.com/dexevu/2/edit?html,css,output

jarlyyn

2015-11-06 21:37:51 +08:00

借用某人数据

https://jsfiddle.net/jarlyyn/vy8v2ef9/

大概这些样式

.item{margin-bottom:2em}
img{float:left}
.text{padding-bottom:1em}
.text:after{display:block;content:'';clear:both}
.meta{color:blue;margin-top:-1em;}

FragmentLs

2015-11-06 21:38:16 +08:00

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
float: left;
}
.text::after{
content: ".";
visibility: hidden;
display: block;
clear: both;
height: 0;
font-size: 0;
}
</style>
</head>
<body>
<img src="https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s0-c-k-no-ns/photo.jpg" width="400px"/>
<div class="text">
This is summary. This is summary. This is summary.<br />
This is summary. This is summary. This is summary.<br />
This is summary. This is summary. This is summary.<br />
This is summary. This is summary. This is summary.<br />
This is summary. This is summary. This is summary.<br />
</div>
<div class="meta">
This is meta. This is meta. This is meta.
</div>
</body>
</html>

Bijiabo

2015-11-06 21:41:57 +08:00

给 25 楼跪了，原来这么写...

FragmentLs

2015-11-06 21:43:06 +08:00

和 25L 一样，几年前在 Jeffrey Way 的视频里学的...

jarlyyn

2015-11-06 21:45:38 +08:00

错了，样式这样

.item{margin-bottom:2em}
img{float:left}
.text{padding-bottom:1em}
.img:after{display:block;content:'';clear:both}
.meta{color:blue;margin-top:-1em;}

https://jsfiddle.net/jarlyyn/vy8v2ef9/

sneezry

2015-11-06 21:47:27 +08:00

@kfll 赞！不过不太明白，为什么 :after 伪类没有清除后面 meta 的浮动呢？

jarlyyn

2015-11-06 21:48:16 +08:00

@FragmentLs

我这里看你这个不行， post meta 分行了。没对齐。

我想要实现楼主的想法，怎么都要 margin-top:-1em 的吧

jarlyyn

2015-11-06 21:49:51 +08:00

@sneezry

meta 啥时候浮动了，正常文本流啊

jarlyyn

2015-11-06 21:53:34 +08:00

https://jsfiddle.net/jarlyyn/vy8v2ef9/6/

jarlyyn

2015-11-06 21:54:12 +08:00

我觉得楼主就是对负 margin 不熟……

sneezry

2015-11-06 21:55:23 +08:00

@jarlyyn 同学，概念搞混了，正常文本流指 position:static 的元素，对应于绝对定位、相对定位和固定定位。浮动是指环绕块级元素排列， meta 在内容少的时候就是环绕图像排布的， 25L 的方法中， meta 左侧的缩减就是图像 float 属性导致的，但是我不太明白前面元素的 after 伪类明明已经通过 clear:both 清除了两端的浮动，为什么 meta 还是会左侧环绕。

sneezry

2015-11-06 21:56:23 +08:00

@jarlyyn 不要乱扣帽子，我在我的书里没少用负的 margin ：

http://item.jd.com/11545545.html

jarlyyn

2015-11-06 22:00:21 +08:00

@sneezry
1.正常文本流指的是 meta,meta 不是正常文本流么？

2.环绕是因为图片设置了浮动，文字要正常文本流才能环绕啊

3.clear 是清除了 'img::after'这个在 Html 中没有的元素的浮动，和其他元素都没有关系啊，和加入一个<div style='clear:both'></div>一样啊。加入 clear 是为了让父级的框有正常的高度而已

虽然我有两年年没搞过前端的东西了，但应该还不至于概念搞混吧……