1 //这是css样式代码 2 .zw .zw-right .right-2 .xinwen .wenming .wenming-banner .pic{ 3 width:49%; 4 height:100%; 5 background:url(../images/bg-bottom.png); 6 background-size:100% 100%; 7 margin-top:3px; 8 } 9 10 //这是html结构代码 11 <div class="wenming-banner"> 12 <div class="pic" style="float:right"> 13 <!--<img src="../images/bg-bottom.png" />--> 14 </div> 15 <div class="pic" style="float:left"> 16 <!--<img src="../images/bg-bottom.png" />--> 17 </div> 18 </div>
你把class前面一段去掉试试.zw .zw-right .right-2 .xinwen .wenming
我这里去掉之后就显示了。
因为我这外层有好多div;那些都是父div的class属性;去掉我也试过,还是老样子
两个小div的浮动要同一方向,
同一方向有bug,就是第一个莫名的出现了左边距,把第二个挤到第二行
@世间无码: 什么意思?截图看看
@代码飞了: 怎么发截图的
@世间无码: 。。。截好的图,保存在桌面上,
@世间无码: 要不直接发给我邮箱,我给你看看
@代码飞了: 好,你邮箱多少
@世间无码: cjle_hello@163.com
@世间无码: 如果想移动到一边 你就可以浮动 left right 你所说的挤到下一行是你的父元素 宽度没给够 ,容不下两个 定位和浮动 相对来说都是简单的 但能浮动完成 最好别定位
给.pic属性加一个display:inline-block;试试管用不?
两个DIV换一下顺序就可以了,下一题
这就是右浮动的在前面
@世间无码: 让左浮动的在前面会怎么样?
@之奇一昂: 左浮动在前面会自动缩进
@世间无码: ?? 那是另一个问题
把你写的效果图贴出了看看是啥样,还有你贴出来的样式人家看得不明不白的,不知道是哪里出问题....
你说的错位效果是什么样子的然后在浏览器上查看一下源代码哪里出问题了
你说的错位是值两张图片左右位置错了吗?如果是的话是因为你第一个div不应该给右浮动
两个div不在一个水平线上
@世间无码: 那肯定是你样式有问题,我看结构是没问题的,然后建议你提问的时候最好能附加一张最终想要的效果图,那样问题就很清晰了
一个div浮动就够了,不需要两个分别浮动
<!DOCTYPE html> <style> div.wenming-banner{ position: relative; width: 400px; height: 400px; } div.pic{ width:49%; height:100%; background: red; background-size:100% 100%; margin-top:3px; } </style> <div class="wenming-banner"> <div class="pic" style="float:right"> </div> <div class="pic" style="float:left"> </div> </div>
你试下
如果出现图片太大,跑出div.pic的盒子,用overflow:hidden去除溢出盒子的部分,或者将图片设定为父盒子的100%宽度。
我复制你代码是可以运行的 不过我把宽高改掉了,我觉得是宽高出现了问题。 还有,类最好别写这么长。反正我是看着你的CSS好晕。
1、有没有清除img的margin值;
2、如果父级元素没有固定的高度,子元素这个所谓的height:100%没有意义;这设计到浏览器的渲染机制,最终得到的高度是子元素的高度。