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 代码也脏脏的~
|