这是一个创建于 3308 天前的主题，其中的信息可能已经有所发展或是发生改变。
今天公司有一个 task ，在展示文章列表时，如果某个文章有缩略图，那么 summary 环绕缩略图排布。这是一个非常简单的问题， float:left 完美解决。但是，难点是在 summary 后面要跟着一行 post meta ，显示作者、评论数等等，没有缩略图时， post meta 直接跟着 summary 就可以了，但是，有缩略图时就会略显繁琐，分两种情况：
1 、 summary 完全包围的缩略图， post meta 还是紧跟着 summary
2 、 summary 没有完全包围缩略图， post meta 单独一行和图片底部对齐
示意图如下：
大家开动脑筋，不允许用 js ，看看如何实现。
今天下班前我憋出了一个 hack 方法，一会把整个过程写在博客里分享给大家。
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
http://codepen.io/Sneezry/pen/bVxPGP?editors=110
 |
1
sox 2015-11-06 20:12:04 +08:00
这个有意思，坐等菊苣们解答
|
 |
2
emric 2015-11-06 20:27:08 +08:00
|
|
3
emric 2015-11-06 20:31:49 +08:00
一个手快，把 body 的属性打错了。忽略忽略。
|
|
4
sox 2015-11-06 20:32:19 +08:00
楼上亮了 233
|
 |
7
it1989 2015-11-06 20:48:59 +08:00
|
 |
9
jarlyyn 2015-11-06 21:00:51 +08:00
不用 js 叫什么前端，叫切图的……
|
 |
10
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> |
 |
13
m939594960 2015-11-06 21:04:57 +08:00
我感觉就是一个 min-height 的属性的问题
|
 |
14
sneezry OP @m939594960 并不是，因为图的高度是不固定的，从高度入手应该行不通
|
 |
16
Bijiabo 2015-11-06 21:07:51 +08:00
https://jsfiddle.net/bijiabo/pz5ebLt2/
感觉实现比较蠢。。。轻喷。。 |
|
17
Bijiabo 2015-11-06 21:09:06 +08:00
|
|
18
jarlyyn 2015-11-06 21:09:30 +08:00
另外本地测试了下，给文字部分加个 min-height 不就好了
hack 是为了不支持 min-height 的浏览器么…… |
|
19
Bijiabo 2015-11-06 21:10:58 +08:00
基于 sneezry 的修改，希望不要介意 @@...
|
|
20
raincious 2015-11-06 21:13:31 +08:00
@sox 是嘛？发帖前没看，抱歉。
其实这个问题解决方法很多，甚至拿 position absolute 都可以。关键点是只要能让 Cover 外面的层的高度扩展到和图片一样大就行了。 剩下的就是解决 meta 数据遮挡 content text 的问题了。这个无法彻底避免，但是利用 text-overflow 和 box-shadow 能够尽量让这种遮盖不是十分唐突。 当然我还是想看楼主的 Hack 哈。 |
|
21
sneezry OP @jarlyyn 哎，审题啊同学，不审题肯定给不出正确答案的嘛！图片的高度不固定啊不固定，肿么设置 min-height 啊，这个 min-height 你要给多少哇~
|
|
22
jarlyyn 2015-11-06 21:18:30 +08:00
|
|
23
sneezry OP @jarlyyn 因为呢，这个是一个 wp 的 theme ，不能 hard code ，虽然目前图片的宽度都是一样的，但是如果有一天我们要改图片的 width ，那么整个 theme 就都挂了，这种 code 肯定是无法通过我司 code review 的~
|
 |
25
kfll 2015-11-06 21:33:54 +08:00  5
|
|
26
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;} |
 |
27
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> |
|
28
Bijiabo 2015-11-06 21:41:57 +08:00
给 25 楼跪了，原来这么写...
|
|
29
FragmentLs 2015-11-06 21:43:06 +08:00
和 25L 一样，几年前在 Jeffrey Way 的视频里学的...
|
|
30
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/ |
|
32
jarlyyn 2015-11-06 21:48:16 +08:00
|
|
34
jarlyyn 2015-11-06 21:53:34 +08:00
|
|
35
jarlyyn 2015-11-06 21:54:12 +08:00
我觉得楼主就是对负 margin 不熟……
|
|
36
sneezry OP @jarlyyn 同学，概念搞混了，正常文本流指 position:static 的元素，对应于绝对定位、相对定位和固定定位。浮动是指环绕块级元素排列， meta 在内容少的时候就是环绕图像排布的， 25L 的方法中， meta 左侧的缩减就是图像 float 属性导致的，但是我不太明白前面元素的 after 伪类明明已经通过 clear:both 清除了两端的浮动，为什么 meta 还是会左侧环绕。
|
|
37
sneezry OP |
|
38
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 是为了让父级的框有正常的高度而已 虽然我有两年年没搞过前端的东西了，但应该还不至于概念搞混吧…… |
|
41
sneezry OP @jarlyyn 我应该是 clear 的属性理解的不对，滚去翻 w3c 文档了……另外刚刚我有点主观了，向同学道歉~显然 25L 的实现更加优雅！
|
 |
46
iNaru 2015-11-06 23:07:48 +08:00 via Android
<img align=left src>
|
 |
47
marvinwilliam 2015-11-06 23:12:21 +08:00
受教了，顶一下
|
 |
48
paledream 2015-11-06 23:23:06 +08:00
学习了
|
 |
49
MinonHeart 2015-11-07 00:12:44 +08:00
@kfll
--------------------------- #img-3 { width: 64px; } --------------------------- 为什么不用 width ，你是知道这在 Chrome 有问题的嘛 (^・ω・^ )  |
|
50
MinonHeart 2015-11-07 00:13:17 +08:00
 |
 |
51
g0thic 2015-11-07 00:19:10 +08:00
这写法的确是黑科技。。还可以试试 flex 或许能想出更优雅的方法
|
 |
52
jiyinyiyong 2015-11-07 08:58:29 +08:00
代码问题最好还是在 SegmentFault 问, 贴代码都方便一点.
如果我们遇到这种需求, 基本上跟设计师要求调整设计了. 同样的卡片呈现不同的样式, 时间信息的位置也跳来跳去, 有没有考虑清楚用户的感受. 而且短文本突然出现一个折行, 影响阅读也比较明显. |
 |
53
maplerecall 2015-11-07 14:10:22 +08:00
@jiyinyiyong 严重同意，遇到这种需求我们是会去找设计和产品撕的，怎么想都不合理，不仅难看，即使用 25l 黑科技实现了 html 代码也脏脏的~
|
Select Language