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

2012-06-21 14:55:10 +08:00
 Air_Mu
如图所示,图片在文字的右下方。
我试了下 只能让图片在文字的右上方,如何做成这样呢?

6292 次点击
所在节点    问与答
21 条回复
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
qiayue
2012-06-21 16:00:45 +08:00
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;"><!--广告代码,firefox和opera还有少量偏差,需要另外调整,就不写了,基本可以。--></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
<div style="float:right;height:100px;width:1px;"><!--图片--></div> 改成<div style="float:right;height:100px;width:1px;"></div>
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 不好实现。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/40185

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX