V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Air_Mu
V2EX  ›  问与答

CSS问题,如何让文字浮动在图片的左上角 像这样;

  •  
  •   Air_Mu · 2012-06-21 14:55:10 +08:00 · 6292 次点击
    这是一个创建于 4542 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如图所示,图片在文字的右下方。
    我试了下 只能让图片在文字的右上方,如何做成这样呢?

    21 条回复    1970-01-01 08:00:00 +08:00
    Air_Mu
        1
    Air_Mu  
    OP
       2012-06-21 15:26:45 +08:00
    求。。求解
    123456
        2
    123456  
       2012-06-21 15:47:04 +08:00
    float
    qiayue
        3
    qiayue  
       2012-06-21 15:59:46 +08:00
    qiayue
        4
    qiayue  
       2012-06-21 16:00:45 +08:00
    NemoAlex
        5
    NemoAlex  
       2012-06-21 16:12:40 +08:00
    没有办法实现,不可以这样布局哦
    zooandzoo
        6
    zooandzoo  
       2012-06-21 16:20:15 +08:00
    参照,http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div
    意思说放一个空的DIV把那个IMG顶下去:

    如:

    <div>
    <div style="float:right;height:100px;width:1px;"><!--图片--></div>
    <div style="float:right;height:250px;width:250px;clear:right;"><!--广告代码,firefox和opera还有少量偏差,需要另外调整,就不写了,基本可以。--></div>
    <p>文章正文部分</p>
    </div>


    前提你要知道内容高度,要不就用JS控制高度。。貌似见过许多这样布局的你可以看他们的代码啊
    Air_Mu
        7
    Air_Mu  
    OP
       2012-06-21 16:20:33 +08:00
    @qiayue 浮动知道啊 但是做不成图里这种样子 图片浮在上面而不再下面
    Air_Mu
        8
    Air_Mu  
    OP
       2012-06-21 16:21:38 +08:00
    @zooandzoo 也就是说纯用CSS不行的么?
    zooandzoo
        9
    zooandzoo  
       2012-06-21 16:21:48 +08:00
    <div style="float:right;height:100px;width:1px;"><!--图片--></div> 改成<div style="float:right;height:100px;width:1px;"></div>
    zooandzoo
        10
    zooandzoo  
       2012-06-21 16:22:20 +08:00
    好像不行。。。
    Air_Mu
        11
    Air_Mu  
    OP
       2012-06-21 16:23:10 +08:00
    我试试看DIV钩子。如果行的话就严格控制内容高度。
    @zooandzoo
    lianghai
        12
    lianghai  
       2012-06-21 16:45:53 +08:00   ❤️ 1
    把浮动的 <img> 放在「分享型主题」那个 <li> 的后面即可。
    cutehalo
        13
    cutehalo  
       2012-06-21 16:51:18 +08:00
    怎么看着好像百度百科的排版。。。
    Sivan
        14
    Sivan  
       2012-06-21 16:56:04 +08:00   ❤️ 1
    LZ 是说这样吗?
    http://lightcss.com/tutorials/other/v2ex.html
    没试 IE。
    lianghai
        15
    lianghai  
       2012-06-21 16:56:17 +08:00
    CSS 提供 float 这个属性就是为了提供这种排版效果。各位需要重新学习这一部分 CSS 知识了。
    NemoAlex
        16
    NemoAlex  
       2012-06-21 22:43:40 +08:00
    再仔细看了一遍楼主发的帖子
    确认楼主想要的效果我没有很好的办法实现
    如果用一些丑陋的办法的话,则会有一些局限性,例如要求容器定高之类的
    lianghai
        17
    lianghai  
       2012-06-21 22:48:15 +08:00
    @NemoAlex: 「把浮动的 <img> 放在『分享型主题』那个 <li> 的后面」不可行吗?
    NemoAlex
        18
    NemoAlex  
       2012-06-21 23:17:19 +08:00
    @lianghai 可行吗?请制作 Demo 说明
    lianghai
        19
    lianghai  
       2012-06-21 23:52:05 +08:00
    @NemoAlex: 不需要做 demo 了,尽管我自己测试过。你自己试试就知道了。
    romoo
        20
    romoo  
       2012-06-21 23:54:39 +08:00
    「如何让文字浮动在图片的左上角」也就是说文本和图片底端对齐?

    文本字数不确定的情况下,只用 CSS 不好实现。
    lianghai
        21
    lianghai  
       2012-06-22 00:00:34 +08:00
    @NemoAlex: 啊,我明白了。楼主 @Air_Mu 的示意图做得有问题。
    根据这个示意图,这个图片只是镶嵌在文本中间,下侧还有更多段落。于是你的理解是理想的「图片在父盒的右下」,而我的理解是图中那个普通的浮动。看来楼主说「文字浮动在图片的左上角」的意思还真就是字面意思。
    抱歉。那么纯用 CSS 确实不好做。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3136 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 13:24 · PVG 21:24 · LAX 05:24 · JFK 08:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.