上山打老虎 发表于 2016-3-27 16:14:36

请教下~

代码如图,为何第一块左半边的浮动<a>里面的内容不能包含到大框里~代码
样式
显示效果按理文字后面应该接着下面的手机图标~但是浮动不上去,希望帮忙看看


<div class="left">
         <p>您好,中国瓷砖商城欢迎您!</p>
         <div class="leftShop"><a href=""><img src="Images/images/留言版_03.png" width="11" height="16" />手机商城</a></div>
</div>

.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

上山打老虎 发表于 2016-3-27 16:30:56

同行之间P和A标签没有同时转换成想通元素,P还是行级元素,没有受到浮动效果,a标签浮动没有产生效果~/备注/

falost 发表于 2016-3-27 16:33:08

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

希望能够帮助到你!
页: [1]
查看完整版本: 请教下~