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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 4529 天前的主题，其中的信息可能已经有所发展或是发生改变。

如图所示，图片在文字的右下方。
我试了下只能让图片在文字的右上方，如何做成这样呢？

图片

文字

我试

21 条回复 • 1970-01-01 08:00:00 +08:00

Air_Mu

2012-06-21 15:26:45 +08:00

求。。求解

123456

2012-06-21 15:47:04 +08:00

float

qiayue

2012-06-21 15:59:46 +08:00

看这里 http://www.w3school.com.cn/css/css_positioning_floating.asp

qiayue

2012-06-21 16:00:45 +08:00

还有这里 http://www.w3school.com.cn/tiy/t.asp?f=html_image_float

NemoAlex

2012-06-21 16:12:40 +08:00

没有办法实现，不可以这样布局哦

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;"></div>
<p>文章正文部分</p>
</div>

前提你要知道内容高度，要不就用JS控制高度。。貌似见过许多这样布局的你可以看他们的代码啊

Air_Mu

2012-06-21 16:20:33 +08:00

@qiayue 浮动知道啊但是做不成图里这种样子图片浮在上面而不再下面

Air_Mu

2012-06-21 16:21:38 +08:00

@zooandzoo 也就是说纯用CSS不行的么？

zooandzoo

2012-06-21 16:21:48 +08:00

zooandzoo

2012-06-21 16:22:20 +08:00

好像不行。。。

Air_Mu

2012-06-21 16:23:10 +08:00

我试试看DIV钩子。如果行的话就严格控制内容高度。
@zooandzoo

lianghai

2012-06-21 16:45:53 +08:00

把浮动的 <img> 放在「分享型主题」那个 <li> 的后面即可。

cutehalo

2012-06-21 16:51:18 +08:00

怎么看着好像百度百科的排版。。。

Sivan

2012-06-21 16:56:04 +08:00

LZ 是说这样吗？
http://lightcss.com/tutorials/other/v2ex.html
没试 IE。

lianghai

2012-06-21 16:56:17 +08:00

CSS 提供 float 这个属性就是为了提供这种排版效果。各位需要重新学习这一部分 CSS 知识了。

NemoAlex

2012-06-21 22:43:40 +08:00

再仔细看了一遍楼主发的帖子
确认楼主想要的效果我没有很好的办法实现
如果用一些丑陋的办法的话，则会有一些局限性，例如要求容器定高之类的

lianghai

2012-06-21 22:48:15 +08:00

@NemoAlex: 「把浮动的 <img> 放在『分享型主题』那个 <li> 的后面」不可行吗？

NemoAlex

2012-06-21 23:17:19 +08:00

@lianghai 可行吗？请制作 Demo 说明

lianghai

2012-06-21 23:52:05 +08:00

@NemoAlex: 不需要做 demo 了，尽管我自己测试过。你自己试试就知道了。

romoo

2012-06-21 23:54:39 +08:00

「如何让文字浮动在图片的左上角」也就是说文本和图片底端对齐？

文本字数不确定的情况下，只用 CSS 不好实现。

lianghai

2012-06-22 00:00:34 +08:00

@NemoAlex: 啊，我明白了。楼主 @Air_Mu 的示意图做得有问题。
根据这个示意图，这个图片只是镶嵌在文本中间，下侧还有更多段落。于是你的理解是理想的「图片在父盒的右下」，而我的理解是图中那个普通的浮动。看来楼主说「文字浮动在图片的左上角」的意思还真就是字面意思。
抱歉。那么纯用 CSS 确实不好做。

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

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