打印

[求助] 如何实现左文右图板块? [ 已解决 ]

gulu77 [楼主]

中级会员

帖子: 241
体力: 447
威望: 2
当前: 广东广州

1^# 大中小发表于 2008-4-8 16:00 只看该作者

经过帮助及本人的努力问题已得到解决,具体答案请参考 18楼

----------------------- 以下为原问题 ---------------------------

提示：您可以先修改部分代码再运行

[ 本帖最后由 gulu77 于 2008-4-9 14:39 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

gulu77.com

TOP

10dw

高级会员

帖子: 293
体力: 588
威望: 0

发短消息

2^# 大中小发表于 2008-4-8 16:39 只看该作者

提示：您可以先修改部分代码再运行

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>none</title>

<style type="text/css" media="screen">

<!--

@charset "utf-8";

* {margin:0;padding:0;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:small;}

.text_td {width:100px;}

td {vertical-align:top;}

-->

</style>

<script type="text/javascript">

<!--

-->

</script>

</head>

<body>

<table>

<tbody>

<tr>

<td class="text_td">左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图</td><td><img src="http://img.vlongbiz.com/news/h008/h04/img200709040944560969.jpg" /></td>

</tr>

</tbody>

</table>

</body>

</html>

TOP

bluekein

初级会员

帖子: 75
体力: 102
威望: 0
当前: 广东深圳
离线: 10 天

3^# 大中小发表于 2008-4-8 17:02 只看该作者

引用:

原帖由 gulu77 于 2008-4-8 16:00 发表
[html]

实现左文右图板块
.block {padding:5px; width:400px; border:1px solid #ccc; float:left;}
.block .photo {float:left;}
.block .cont {float:right; }
Post browser spec ...

.block .cont {margin-left:160px; }//160是你图片的宽度

TOP

gulu77 [楼主]

中级会员

帖子: 241
体力: 447
威望: 2
当前: 广东广州

4^# 大中小发表于 2008-4-8 17:20 只看该作者

谢谢楼上两位的回复,但你们的答案, 不是我想要的..

制作要求如下:

1. 必须要是以下的XHTML架构

<div class="block">
<div class="photo"><img /></div>
<div class="cont">text...</div>
</div>

2. .block 里的元素宽度都不固定的, 所以 .photo 及 .cont 不能出现 width 或 margin 之类的固定值!

[ 本帖最后由 gulu77 于 2008-4-8 17:22 编辑 ]

gulu77.com

TOP

10dw

高级会员

帖子: 293
体力: 588
威望: 0

发短消息

5^# 大中小发表于 2008-4-8 17:29 只看该作者

文字也不要width? 从胡同里出来吧

TOP

ship763

闲人763
高级会员

帖子: 361
体力: 714
威望: 0
当前: 广东深圳

6^# 大中小发表于 2008-4-8 17:45 只看该作者

期待一下这个题目怎么实现

TOP

alize

悲剧小黑
初级会员

帖子: 76
体力: 145
威望: 0
离线: 1 天

发短消息

7^# 大中小发表于 2008-4-8 18:03 只看该作者

block内部不能出现width 那block可以不？

学习中

TOP

gulu77 [楼主]

中级会员

帖子: 241
体力: 447
威望: 2
当前: 广东广州

8^# 大中小发表于 2008-4-8 19:18 只看该作者

.block 可以出现width

gulu77.com

TOP

by0001

高级会员

帖子: 441
体力: 896
威望: 1
当前: 广东深圳

发短消息

9^# 大中小发表于 2008-4-8 19:43 只看该作者

两个容器都要自适应宽度,只有用JS了

致力于web2.0研究

TOP

yizhe

新手上路

帖子: 3
体力: 6
威望: 0
当前: 北京东城区
离线: 7 天

10^# 大中小发表于 2008-4-8 19:49 只看该作者

提示：您可以先修改部分代码再运行

TOP

by0001

高级会员

帖子: 441
体力: 896
威望: 1
当前: 广东深圳

发短消息

11^# 大中小发表于 2008-4-8 19:53 只看该作者

楼上的和我做的差不多,慢了一步,呵呵!

提示：您可以先修改部分代码再运行

致力于web2.0研究

TOP

imyuanb

初级会员

帖子: 103
体力: 168
威望: 0
当前: 湖南娄底
离线: 3 天

12^# 大中小发表于 2008-4-8 20:22 只看该作者

用float不行么?

TOP

fuguojian1988

天天向网NET
高级会员

帖子: 411
体力: 873
威望: 0
当前: 河南商丘

13^# 大中小发表于 2008-4-8 21:51 只看该作者

楼主要求的还要符合W3C标准的呀，忽忽

★FU㈩加油滴━★

TOP

wiseinfo

中级会员

帖子: 162
体力: 335
威望: 5
离线: 1 天

发短消息

14^# 大中小发表于 2008-4-9 01:19 只看该作者

10楼和11楼都改变了 html 的嵌套结构。并且那是围绕的效果不是左右分列。

做的不是特别仔细，主要为了体现原理。其实就是利用了 display:table-cell 将那个两个 div 变成了 td 。

支持 IE6 IE7 Firefox，主要增加了2句CSS样式：.block div{ display:table-cell; *display:block; padding:5px; } .block .photo>img{ float:left; position:relative; top:-1em; *top:0;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现左文右图板块</title>
<style type="text/css">
.block{ width:400px; border:1px solid #ccc; float:left;} 
.block div{ display:table-cell; *display:block; padding:5px; }
.block .photo{ *float:left;}
.block .cont{ *float:right; }
.block .photo>img{ float:left; position:relative; top:-1em; *top:0;}
</style>
</head>
<body>
<div class="table">
<div class="block">
	<div class="photo"><img width="160" height="80" alt="text..." src="http://upload.u-state.com/images/7969201207640959.jpg"/></div>
	<div class="cont">Post browser specific CSS problems here, for example, a CSS not looking right in Safari. Or ask for a browser check of your CSS.Post browser specific CSS problems here, for example, a CSS not looking right in Safari. Or ask for a browser check of your CSS.</div>
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

支持 IE6 IE7 Firefox Opera，为了支持 Opera 增加一句 <h6 style="height:0px; overflow:hidden; padding:0; margin:0;"> </h6> 来帮助 Opera，应该有更好的办法，不用插入垃圾代码，但懒得想了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现左文右图板块</title>
<style type="text/css">
.block{ width:400px; border:1px solid #ccc; float:left;} 
.block div{ display:table-cell; *display:block; padding:5px; }
.block .photo{ *float:left;}
.block .cont{ *float:right; }
.block .photo>img{ float:left; position:relative; top:-1em; *top:0;}
</style>
</head>
<body>
<div class="table">
<div class="block">
	<div class="photo"><h6 style="height:0px; overflow:hidden; padding:0; margin:0;"> </h6><img width="160" height="80" alt="text..." src="http://upload.u-state.com/images/7969201207640959.jpg"/></div>
	<div class="cont">Post browser specific CSS problems here, for example, a CSS not looking right in Safari. Or ask for a browser check of your CSS.Post browser specific CSS problems here, for example, a CSS not looking right in Safari. Or ask for a browser check of your CSS.</div>
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 wiseinfo 于 2008-4-9 01:27 编辑 ]

TOP

by0001

高级会员

帖子: 441
体力: 896
威望: 1
当前: 广东深圳

发短消息

15^# 大中小发表于 2008-4-9 09:21 只看该作者

回复 wiseinfo 在 14# 的帖子

楼上的，你好像没有明白楼主的意思，他是要“左文右图”，而不是你的“左图右文”啊！

致力于web2.0研究

TOP

tsun1024

高级会员

帖子: 322
体力: 513
威望: 0
当前: 江苏南京
离线: 2 天

发短消息

16^# 大中小发表于 2008-4-9 11:04 只看该作者

op下未试～右图左文同理实现

提示：您可以先修改部分代码再运行

TOP

wiseinfo

中级会员

帖子: 162
体力: 335
威望: 5
离线: 1 天

发短消息

17^# 大中小发表于 2008-4-9 11:36 只看该作者

引用:

原帖由 by0001 于 2008-4-9 09:21 发表
楼上的，你好像没有明白楼主的意思，他是要“左文右图”，而不是你的“左图右文”啊！

看他自己的示意图和他自己的代码你也就明白。他的题目写的左右有问题。还有不在左右，而是实现原理。

TOP

gulu77 [楼主]

中级会员

帖子: 241
体力: 447
威望: 2
当前: 广东广州

18^# 大中小发表于 2008-4-9 14:32 只看该作者

问题已得到解决谢谢楼上各位 (^_^)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现左文右图板块-Gulu77</title>
<style type="text/css">
.block{ width:60%; border:1px solid #ccc; } 
.block div{ display:table-cell; padding:5px; vertical-align:top; *float:left}
</style>
</head>
<body>
<p>不妨改变.block 及 img 的宽度来试试看!</p>
 
<div class="block">
	<div class="photo"><img width="270" height="80" alt="text..." src="http://upload.u-state.com/images/7969201207640959.jpg"/></div>
	<div class="cont">Post browser specific CSS problems here, for example, a CSS not looking right in Safari. Or ask for a browser check of your CSS.Post browser specific CSS problems here, for example, a CSS not looking right in Safari. Or ask for a browser check of your CSS.Post browser specific CSS problems here, for example, a CSS not looking right in Safari. Or ask for a browser check of your CSS.Post browser specific CSS problems here, for example, a CSS not looking right in Safari. Or ask for a browser check of your CSS.Post browser specific CSS problems here, for example, a CSS not looking right in Safari. Or ask for a browser check of your CSS.Post browser specific CSS problems here, for example, a CSS not looking right in Safari. Or ask for a browser check of your CSS.</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

解决方案:

左图右文板块http://blog.gulu77.com/demo/200804/imgfloatleft.html

左文右图板块http://blog.gulu77.com/demo/200804/imgfloatright.html

针对IE的http://blog.gulu77.com/demo/200804/floattest.html

问题解决思路:
IE系列浏览器-
在.block内的div设置浮动后问题得以解决。(据我个人理解,IE的解析为给同等级元素设置float后,自动赋予对象,所谓的100%高度空间!所以内容才会分为左右两块)

非IE浏览器-
在非IE中则没有float 100%高度空间的解析, 而我采用了wiseinfo所说的用display:table-call;把.block内的div作为表格单元格显示问题得以解决

延伸思考:
为什么在IE中同等级元素设置float后,会占100%高度空间,这样的解析在非IE中确没有,到底谁的解析才是正确? 他们的解析机制是什么?

文章已发表至我的blog http://blog.gulu77.com/?p=40

[ 本帖最后由 gulu77 于 2008-4-9 14:33 编辑 ]

gulu77.com

TOP

drago37net

新手上路

帖子: 1
体力: 2
威望: 0
离线: 2 天

发短消息

19^# 大中小发表于 2008-4-21 14:28 只看该作者

.block div{ display:table-cell; padding:5px; vertical-align:top; *float:left}

不知道红色处的代码是什么意思，是所有元素都向左浮动吗?去掉红色部分在IE下效果不对的。

希望有人帮我解释一下，谢了~~

TOP

[求助] 如何 实现左文右图板块? [ 已解决 ]

代码:

引用:

回复 wiseinfo 在 14# 的帖子

引用:

问题已得到解决谢谢楼上各位 (^_^)

[求助] 如何实现左文右图板块? [ 已解决 ]