V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sneezry
V2EX  ›  程序员

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

  •  
  •   sneezry ·
    Sneezry · 2015-11-06 20:09:00 +08:00 · 4198 次点击
    这是一个创建于 3289 天前的主题,其中的信息可能已经有所发展或是发生改变。
    今天公司有一个 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
    53 条回复    2015-11-07 14:10:22 +08:00
    sox
        1
    sox  
       2015-11-06 20:12:04 +08:00
    这个有意思,坐等菊苣们解答
    emric
        2
    emric  
       2015-11-06 20:27:08 +08:00
    emric
        3
    emric  
       2015-11-06 20:31:49 +08:00
    一个手快,把 body 的属性打错了。忽略忽略。
    sox
        4
    sox  
       2015-11-06 20:32:19 +08:00
    楼上亮了 233
    sox
        5
    sox  
       2015-11-06 20:34:49 +08:00
    @emric 233 打错了你改了就会同步吧
    sneezry
        6
    sneezry  
    OP
       2015-11-06 20:37:50 +08:00
    @emric 别闹,图的高度是不固定的
    it1989
        7
    it1989  
       2015-11-06 20:48:59 +08:00
    难道是我理解错了?
    这个首页看看,是不是这样?
    http://blog.isz5.com/
    sneezry
        8
    sneezry  
    OP
       2015-11-06 20:54:31 +08:00
    @it1989 这样是不是更清晰些:

    jarlyyn
        9
    jarlyyn  
       2015-11-06 21:00:51 +08:00
    不用 js 叫什么前端,叫切图的……
    raincious
        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>
    sox
        11
    sox  
       2015-11-06 21:03:32 +08:00 via Android
    @jarlyyn 你造吗 有时候大侠喜欢让你一只脚
    sneezry
        12
    sneezry  
    OP
       2015-11-06 21:04:00 +08:00
    @jarlyyn 喷的好!
    m939594960
        13
    m939594960  
       2015-11-06 21:04:57 +08:00
    我感觉就是一个 min-height 的属性的问题
    sneezry
        14
    sneezry  
    OP
       2015-11-06 21:06:25 +08:00
    @m939594960 并不是,因为图的高度是不固定的,从高度入手应该行不通
    sox
        15
    sox  
       2015-11-06 21:06:28 +08:00 via Android
    @raincious 你和二楼应该是一样的。。
    Bijiabo
        16
    Bijiabo  
       2015-11-06 21:07:51 +08:00
    https://jsfiddle.net/bijiabo/pz5ebLt2/
    感觉实现比较蠢。。。轻喷。。
    Bijiabo
        17
    Bijiabo  
       2015-11-06 21:09:06 +08:00
    jarlyyn
        18
    jarlyyn  
       2015-11-06 21:09:30 +08:00
    另外本地测试了下,给文字部分加个 min-height 不就好了

    hack 是为了不支持 min-height 的浏览器么……
    Bijiabo
        19
    Bijiabo  
       2015-11-06 21:10:58 +08:00
    基于 sneezry 的修改,希望不要介意 @@...
    raincious
        20
    raincious  
       2015-11-06 21:13:31 +08:00
    @sox 是嘛?发帖前没看,抱歉。

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

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

    当然我还是想看楼主的 Hack 哈。
    sneezry
        21
    sneezry  
    OP
       2015-11-06 21:13:44 +08:00
    @jarlyyn 哎,审题啊同学,不审题肯定给不出正确答案的嘛!图片的高度不固定啊不固定,肿么设置 min-height 啊,这个 min-height 你要给多少哇~
    jarlyyn
        22
    jarlyyn  
       2015-11-06 21:18:30 +08:00
    @sneezry

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

    变高么也简单, post meta 前 clear both,然后 margin-top:-1em 呗。
    sneezry
        23
    sneezry  
    OP
       2015-11-06 21:23:04 +08:00
    @jarlyyn 因为呢,这个是一个 wp 的 theme ,不能 hard code ,虽然目前图片的宽度都是一样的,但是如果有一天我们要改图片的 width ,那么整个 theme 就都挂了,这种 code 肯定是无法通过我司 code review 的~
    sneezry
        24
    sneezry  
    OP
       2015-11-06 21:28:07 +08:00
    @Bijiabo 非常赞,但是有个问题,就是 class 用了 hard code ,这样是无法做到自适应的。
    kfll
        25
    kfll  
       2015-11-06 21:33:54 +08:00   ❤️ 5
    jarlyyn
        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;}
    FragmentLs
        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>
    Bijiabo
        28
    Bijiabo  
       2015-11-06 21:41:57 +08:00
    给 25 楼跪了,原来这么写...
    FragmentLs
        29
    FragmentLs  
       2015-11-06 21:43:06 +08:00
    和 25L 一样,几年前在 Jeffrey Way 的视频里学的...
    jarlyyn
        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/
    sneezry
        31
    sneezry  
    OP
       2015-11-06 21:47:27 +08:00
    @kfll 赞!不过不太明白,为什么 :after 伪类没有清除后面 meta 的浮动呢?
    jarlyyn
        32
    jarlyyn  
       2015-11-06 21:48:16 +08:00
    @FragmentLs

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

    我想要实现楼主的想法,怎么都要 margin-top:-1em 的吧
    jarlyyn
        33
    jarlyyn  
       2015-11-06 21:49:51 +08:00
    @sneezry

    meta 啥时候浮动了,正常文本流啊
    jarlyyn
        34
    jarlyyn  
       2015-11-06 21:53:34 +08:00
    jarlyyn
        35
    jarlyyn  
       2015-11-06 21:54:12 +08:00
    我觉得楼主就是对负 margin 不熟……
    sneezry
        36
    sneezry  
    OP
       2015-11-06 21:55:23 +08:00
    @jarlyyn 同学,概念搞混了,正常文本流指 position:static 的元素,对应于绝对定位、相对定位和固定定位。浮动是指环绕块级元素排列, meta 在内容少的时候就是环绕图像排布的, 25L 的方法中, meta 左侧的缩减就是图像 float 属性导致的,但是我不太明白前面元素的 after 伪类明明已经通过 clear:both 清除了两端的浮动,为什么 meta 还是会左侧环绕。
    sneezry
        37
    sneezry  
    OP
       2015-11-06 21:56:23 +08:00
    @jarlyyn 不要乱扣帽子,我在我的书里没少用负的 margin :

    http://item.jd.com/11545545.html
    jarlyyn
        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 是为了让父级的框有正常的高度而已

    虽然我有两年年没搞过前端的东西了,但应该还不至于概念搞混吧……
    shiye515
        39
    shiye515  
       2015-11-06 22:00:57 +08:00
    @sox 给让一只脚点赞
    jarlyyn
        40
    jarlyyn  
       2015-11-06 22:01:37 +08:00
    @sneezry

    这个问题一看就是负 margin 的问题吧?

    难道还有其他复杂的地方么……
    sneezry
        41
    sneezry  
    OP
       2015-11-06 22:04:34 +08:00
    @jarlyyn 我应该是 clear 的属性理解的不对,滚去翻 w3c 文档了……另外刚刚我有点主观了,向同学道歉~显然 25L 的实现更加优雅!
    jarlyyn
        42
    jarlyyn  
       2015-11-06 22:05:46 +08:00
    @sneezry

    不是应该是 23 楼么……
    sneezry
        43
    sneezry  
    OP
       2015-11-06 22:07:37 +08:00
    @jarlyyn 哈哈, 23L 不是我吗……精彩答案在 25L~
    jarlyyn
        44
    jarlyyn  
       2015-11-06 22:09:35 +08:00
    @sneezry
    估计有人被我 block 了,楼层显示不对……
    sneezry
        45
    sneezry  
    OP
       2015-11-06 22:11:31 +08:00
    @jarlyyn block 似乎不影响楼层号啊 O.O
    iNaru
        46
    iNaru  
       2015-11-06 23:07:48 +08:00 via Android
    <img align=left src>
    marvinwilliam
        47
    marvinwilliam  
       2015-11-06 23:12:21 +08:00
    受教了,顶一下
    paledream
        48
    paledream  
       2015-11-06 23:23:06 +08:00
    学习了
    MinonHeart
        49
    MinonHeart  
       2015-11-07 00:12:44 +08:00
    @kfll
    ---------------------------
    #img-3 {
    width: 64px;
    }
    ---------------------------

    为什么不用 width ,你是知道这在 Chrome 有问题的嘛 (^・ω・^ )
    MinonHeart
        50
    MinonHeart  
       2015-11-07 00:13:17 +08:00
    g0thic
        51
    g0thic  
       2015-11-07 00:19:10 +08:00
    这写法的确是黑科技。。还可以试试 flex 或许能想出更优雅的方法
    jiyinyiyong
        52
    jiyinyiyong  
       2015-11-07 08:58:29 +08:00
    代码问题最好还是在 SegmentFault 问, 贴代码都方便一点.

    如果我们遇到这种需求, 基本上跟设计师要求调整设计了.
    同样的卡片呈现不同的样式, 时间信息的位置也跳来跳去, 有没有考虑清楚用户的感受.
    而且短文本突然出现一个折行, 影响阅读也比较明显.
    maplerecall
        53
    maplerecall  
       2015-11-07 14:10:22 +08:00
    @jiyinyiyong 严重同意,遇到这种需求我们是会去找设计和产品撕的,怎么想都不合理,不仅难看,即使用 25l 黑科技实现了 html 代码也脏脏的~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5465 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 01:31 · PVG 09:31 · LAX 17:31 · JFK 20:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.