张鑫旭-鑫空间-鑫生活
it's my whole life!提问交流
某同行:
请教一个我解决不了的问题。我也请教了我做前台的朋友似乎也觉得棘手或无从下手。当然必须得承认，我非常喜欢你的blog但我现在也没能看完你的所有文章，所以不知道你是否有写过解决类似问题的文章。不管如何我对你提出的有关浮动的观点很赞同，有邮为证（也就是我写给我求助的朋友的邮件同时也就是我向你求助的问题）：
--------------分割线-----------------
我想要让文字“真正地围绕”一个盒子（比如图片），就像在word里可以做到的那样。
比如我给的代码里（见最后面），外面的盒子固定大小，里面的图片也是固定大小（暂定），但是里面的文字有多有少。我想要做到的是，图片放在一个固定的位置（暂时就简化为放在外层盒子的正中间吧，就是上下左右都居中对齐），然后那些文字不管多少，总是能够顺序“流”下来，从上到下充满满图片的周边。我希望最好不要多加其他“投机取巧”的标签，而只通过css。当然如果实在不行也可以加。但是肯定要考虑到文字是“一体的不可分割的且有多有少的”（就算超出了盒子，那就隐藏掉）。
另外：如果里面的盒子不是上下左右居中，而是希望“指定位置”呢？比如left：50px，top：50px。
还有，如果里面的图片大小又不定呢？
后两个问题仅作为挑战性课题供睡不着觉的时候想想：）
作为报酬，我招供两篇文章给你，我认为是我这些年学到的有关浮动的最感性又最理性的知识——当然也几乎彻底推翻了我之前对浮动的认识和对我们最常见的布局的理解。地址是：
http://www.zhangxinxu.com/wordpress/?p=583
http://www.zhangxinxu.com/wordpress/?p=594
另：这个帅哥的blog很值得看，年纪轻轻就这么帅，长大了那还了得！
我的代码如下：
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#img1{border:1px solid red; padding:5px; margin:10px; vertical-align:top;}
</style>
</head>
<body>
<div style="width:500px;border:1px solid red;">
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
<img src="images/chinamap.jpg" border="0" id="img1" width="100" align="right" />
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
</div>
</body>
</html>
--------------分割线-----------------
我想要让文字“真正地围绕”一个盒子（比如图片），就像在word里可以做到的那样。
比如我给的代码里（见最后面），外面的盒子固定大小，里面的图片也是固定大小（暂定），但是里面的文字有多有少。我想要做到的是，图片放在一个固定的位置（暂时就简化为放在外层盒子的正中间吧，就是上下左右都居中对齐），然后那些文字不管多少，总是能够顺序“流”下来，从上到下充满满图片的周边。我希望最好不要多加其他“投机取巧”的标签，而只通过css。当然如果实在不行也可以加。但是肯定要考虑到文字是“一体的不可分割的且有多有少的”（就算超出了盒子，那就隐藏掉）。
另外：如果里面的盒子不是上下左右居中，而是希望“指定位置”呢？比如left：50px，top：50px。
还有，如果里面的图片大小又不定呢？
后两个问题仅作为挑战性课题供睡不着觉的时候想想：）
作为报酬，我招供两篇文章给你，我认为是我这些年学到的有关浮动的最感性又最理性的知识——当然也几乎彻底推翻了我之前对浮动的认识和对我们最常见的布局的理解。地址是：
http://www.zhangxinxu.com/wordpress/?p=583
http://www.zhangxinxu.com/wordpress/?p=594
另：这个帅哥的blog很值得看，年纪轻轻就这么帅，长大了那还了得！
我的代码如下：
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#img1{border:1px solid red; padding:5px; margin:10px; vertical-align:top;}
</style>
</head>
<body>
<div style="width:500px;border:1px solid red;">
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
<img src="images/chinamap.jpg" border="0" id="img1" width="100" align="right" />
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
asdfa sdfa sdf asdfa sdf asdf asdf
</div>
</body>
</html>
2012-08-24 10:18HTML/CSS相关
回答(0)
某同行:
鑫哥，我工作三年了，感觉都是在打酱油，感觉自己还是什么都不会，现在很想学习seajs,但是js的基础很烂，你的帖子看的也不是很明白，希望能给个jquery的例子，最好是基础一点的，教我如何调用jquery插件，还有http://wwww.zjsys.com 这是我们公司的一个网站，希望你能给我一些建议
2012-08-21 21:03HTML/CSS相关
回答(0)
某同行:
给幽默的作者：box-flex，flex应该是flexible的缩写，意思是弹性。
另，你经常在文中sign，我估计是sigh。
另，你经常在文中sign，我估计是sigh。
2012-08-21 19:37HTML/CSS相关
回答(1)
某同行:
iframe中动态添加div,但添多了，子页面底部都看不到了，如何让添加个div，iframe自动增高？？
2012-08-20 15:40HTML/CSS相关
回答(1)
某同行:
你还！我用了您的插件。感觉很棒，但是在谷歌浏览器下好像不兼容是怎么回事啊？鼠标点击事件不能够将值赋值到文本框啊
2012-08-17 16:40HTML/CSS相关
回答(1)
Vince:
你好，今天在测试有关justify的时候，发现个问题，在你这个例子中[http://www.zhangxinxu.com/study/201103/inline-block-text-justify-fixed.html],当文档类型是html5格式<!DOCTYPE html>的时候,<span class="justify_fix"></span>这块会有一个高度，试了很多方法都不行，博主帮忙看看
2012-08-16 18:36HTML/CSS相关
回答(1)
分类查看
1. 注册可获得问题回答的动态提醒，如果注册遇到什么问题，例如收不到激活邮件，可尝试通过邮件zhangxinxu@zhangxinxu.com联系我；
2. 如果您的问题不是三言两语能够说清楚的，建议通过邮件zhangxinxu@zhangxinxu.com联系我。提问时候尽量详尽，最好有截图、源代码或者demo。我会在第一时间回复您的问题的。