• 请不要在回答技术问题时复制粘贴 AI 生成的内容
sneezry
V2EX  ›  程序员

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

  •  
  •   sneezry ·
    Sneezry · Nov 6, 2015 · 4731 views
    This topic created in 3865 days ago, the information mentioned may be changed or developed.
    今天公司有一个 task ,在展示文章列表时,如果某个文章有缩略图,那么 summary 环绕缩略图排布。这是一个非常简单的问题, float:left 完美解决。但是,难点是在 summary 后面要跟着一行 post meta ,显示作者、评论数等等,没有缩略图时, post meta 直接跟着 summary 就可以了,但是,有缩略图时就会略显繁琐,分两种情况:

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

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

    示意图如下:



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

    今天下班前我憋出了一个 hack 方法,一会把整个过程写在博客里分享给大家。
    Supplement 1  ·  Nov 6, 2015
    请求大家仔细读一下需求,目前为止大家给的答案都和需求不符啊不符!

    验证的方法很简单,更改图片尺寸看看是否依然能够正常工作。
    Supplement 2  ·  Nov 6, 2015
    上面的示意图给大家误导了,这个怪我,图的大小不是统一的,请大家参考下面的效果图:

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

    http://codepen.io/Sneezry/pen/bVxPGP?editors=110
    53 replies    2015-11-07 14:10:22 +08:00
    sox
        1
    sox  
       Nov 6, 2015
    这个有意思,坐等菊苣们解答
    emric
        2
    emric  
       Nov 6, 2015
    emric
        3
    emric  
       Nov 6, 2015
    一个手快,把 body 的属性打错了。忽略忽略。
    sox
        4
    sox  
       Nov 6, 2015
    楼上亮了 233
    sox
        5
    sox  
       Nov 6, 2015
    @emric 233 打错了你改了就会同步吧
    sneezry
        6
    sneezry  
    OP
       Nov 6, 2015
    @emric 别闹,图的高度是不固定的
    it1989
        7
    it1989  
       Nov 6, 2015
    难道是我理解错了?
    这个首页看看,是不是这样?
    http://blog.isz5.com/
    sneezry
        8
    sneezry  
    OP
       Nov 6, 2015
    @it1989 这样是不是更清晰些:

    jarlyyn
        9
    jarlyyn  
       Nov 6, 2015
    不用 js 叫什么前端,叫切图的……
    raincious
        10
    raincious  
       Nov 6, 2015
    蓝色的不知道。你可能需要固定主文字的高度。

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

    <cover layer>
    <image layer style="width: 100px; float: left;" />
    <content layer style="overflow: auto;">
    TEXT HERE
    </content layer>
    </cover layer>
    sox
        11
    sox  
       Nov 6, 2015 via Android
    @jarlyyn 你造吗 有时候大侠喜欢让你一只脚
    sneezry
        12
    sneezry  
    OP
       Nov 6, 2015
    @jarlyyn 喷的好!
    m939594960
        13
    m939594960  
       Nov 6, 2015
    我感觉就是一个 min-height 的属性的问题
    sneezry
        14
    sneezry  
    OP
       Nov 6, 2015
    @m939594960 并不是,因为图的高度是不固定的,从高度入手应该行不通
    sox
        15
    sox  
       Nov 6, 2015 via Android
    @raincious 你和二楼应该是一样的。。
    Bijiabo
        16
    Bijiabo  
       Nov 6, 2015
    https://jsfiddle.net/bijiabo/pz5ebLt2/
    感觉实现比较蠢。。。轻喷。。
    Bijiabo
        17
    Bijiabo  
       Nov 6, 2015
    jarlyyn
        18
    jarlyyn  
       Nov 6, 2015
    另外本地测试了下,给文字部分加个 min-height 不就好了

    hack 是为了不支持 min-height 的浏览器么……
    Bijiabo
        19
    Bijiabo  
       Nov 6, 2015
    基于 sneezry 的修改,希望不要介意 @@...
    raincious
        20
    raincious  
       Nov 6, 2015
    @sox 是嘛?发帖前没看,抱歉。

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

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

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

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

    变高么也简单, post meta 前 clear both,然后 margin-top:-1em 呗。
    sneezry
        23
    sneezry  
    OP
       Nov 6, 2015
    @jarlyyn 因为呢,这个是一个 wp 的 theme ,不能 hard code ,虽然目前图片的宽度都是一样的,但是如果有一天我们要改图片的 width ,那么整个 theme 就都挂了,这种 code 肯定是无法通过我司 code review 的~
    sneezry
        24
    sneezry  
    OP
       Nov 6, 2015
    @Bijiabo 非常赞,但是有个问题,就是 class 用了 hard code ,这样是无法做到自适应的。
    kfll
        25
    kfll  
       Nov 6, 2015   ❤️ 5
    jarlyyn
        26
    jarlyyn  
       Nov 6, 2015
    借用某人数据

    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  
       Nov 6, 2015
    <!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  
       Nov 6, 2015
    给 25 楼跪了,原来这么写...
    FragmentLs
        29
    FragmentLs  
       Nov 6, 2015
    和 25L 一样,几年前在 Jeffrey Way 的视频里学的...
    jarlyyn
        30
    jarlyyn  
       Nov 6, 2015
    错了,样式这样

    .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
       Nov 6, 2015
    @kfll 赞!不过不太明白,为什么 :after 伪类没有清除后面 meta 的浮动呢?
    jarlyyn
        32
    jarlyyn  
       Nov 6, 2015
    @FragmentLs

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

    我想要实现楼主的想法,怎么都要 margin-top:-1em 的吧
    jarlyyn
        33
    jarlyyn  
       Nov 6, 2015
    @sneezry

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

    http://item.jd.com/11545545.html
    jarlyyn
        38
    jarlyyn  
       Nov 6, 2015
    @sneezry
    1.正常文本流指的是 meta,meta 不是正常文本流么?

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

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

    虽然我有两年年没搞过前端的东西了,但应该还不至于概念搞混吧……
    shiye515
        39
    shiye515  
       Nov 6, 2015
    @sox 给让一只脚点赞
    jarlyyn
        40
    jarlyyn  
       Nov 6, 2015
    @sneezry

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

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

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

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

    如果我们遇到这种需求, 基本上跟设计师要求调整设计了.
    同样的卡片呈现不同的样式, 时间信息的位置也跳来跳去, 有没有考虑清楚用户的感受.
    而且短文本突然出现一个折行, 影响阅读也比较明显.
    maplerecall
        53
    maplerecall  
       Nov 7, 2015
    @jiyinyiyong 严重同意,遇到这种需求我们是会去找设计和产品撕的,怎么想都不合理,不仅难看,即使用 25l 黑科技实现了 html 代码也脏脏的~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2930 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 67ms · UTC 07:29 · PVG 15:29 · LAX 00:29 · JFK 03:29
    ♥ Do have faith in what you're doing.