WEB前端开发人员交流社区

搜索
查看: 999|回复: 2

请教下~

[复制链接]

2

主题

3

帖子

3

积分

前端入门

Rank: 1

积分
3

社区QQ达人

发表于 2016-3-27 16:14:36 | 显示全部楼层 |阅读模式
代码如图,为何第一块左半边的浮动<a>里面的内容不能包含到大框里~代码
样式
显示效果按理文字后面应该接着下面的手机图标~但是浮动不上去,希望帮忙看看

[HTML] 纯文本查看 复制代码
<div class="left">
           <p>您好,中国瓷砖商城欢迎您!</p>
           <div class="leftShop"><a href=""><img src="Images/images/留言版_03.png" width="11" height="16" />手机商城</a></div>
</div>

[CSS] 纯文本查看 复制代码
.nr{width: 1200px;height: 40px;margin: 0 auto;font-size: 12px;}
.left{height: 36px;line-height: 36px;float: left;font-size: 12px;display: inline-block;border: 1px solid #CCCCCC;}
.leftShop{float: left;display: inline-block;}

file:///C:/Users/18392/AppData/Roaming/Tencent/Users/183921342/QQ/WinTemp/RichOle/~$FI5Q%25$VY)~D)K0IY@@NWE.png

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

2

主题

3

帖子

3

积分

前端入门

Rank: 1

积分
3

社区QQ达人

 楼主| 发表于 2016-3-27 16:30:56 | 显示全部楼层
同行之间P和A标签没有同时转换成想通元素,P还是行级元素,没有受到浮动效果,a标签浮动没有产生效果~/备注/
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复 支持 反对

使用道具 举报

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-3-27 16:33:08 | 显示全部楼层
在这里 p 和 div 都是 块级元素,你只浮动了 div 元素 ,并改变为行内块元素  , 却没有浮动 p 元素,p元素还是块级元素,还占据着一整行的位置,下面的div 肯定是上不去了。
解决办法:
第一种  将 p 和 div  都改为行内块元素(inline-block)
第二种  将 p 和 div 都浮动起来 float 即可
第三种  给他们一个position值 将他们固定上去

希望能够帮助到你!
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2020-7-13 18:17

快速回复 返回顶部 返回列表