首页 新闻 会员 周边

为什么一个大div里面两个小div用同一个class浮动的话会错位?碰到这么个问题解不了

0
悬赏园豆:50 [已关闭问题] 关闭于 2016-10-08 15:15
 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>
世间无码的主页 世间无码 | 初学一级 | 园豆:20
提问于:2016-08-10 16:33
< >
分享
所有回答(11)
0

你把class前面一段去掉试试.zw .zw-right .right-2 .xinwen .wenming 

我这里去掉之后就显示了。

Vincent8464 | 园豆:17 (初学一级) | 2016-08-10 16:44

因为我这外层有好多div;那些都是父div的class属性;去掉我也试过,还是老样子

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-10 17:01
0

两个小div的浮动要同一方向,

代码飞了 | 园豆:470 (菜鸟二级) | 2016-08-10 16:52

同一方向有bug,就是第一个莫名的出现了左边距,把第二个挤到第二行

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-10 16:59

@世间无码: 什么意思?截图看看

支持(0) 反对(0) 代码飞了 | 园豆:470 (菜鸟二级) | 2016-08-10 17:08

@代码飞了: 怎么发截图的

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-10 17:25

@世间无码: 。。。截好的图,保存在桌面上,

支持(0) 反对(0) 代码飞了 | 园豆:470 (菜鸟二级) | 2016-08-10 17:48

@世间无码: 要不直接发给我邮箱,我给你看看

支持(0) 反对(0) 代码飞了 | 园豆:470 (菜鸟二级) | 2016-08-10 17:49

@代码飞了: 好,你邮箱多少

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-10 19:03

@世间无码: cjle_hello@163.com

支持(0) 反对(0) 代码飞了 | 园豆:470 (菜鸟二级) | 2016-08-11 09:16

@世间无码: 如果想移动到一边  你就可以浮动  left  right 你所说的挤到下一行是你的父元素  宽度没给够 ,容不下两个   定位和浮动  相对来说都是简单的  但能浮动完成 最好别定位

支持(0) 反对(0) 马大娃 | 园豆:202 (菜鸟二级) | 2016-08-30 09:15
0

给.pic属性加一个display:inline-block;试试管用不?

爱吃de馒头 | 园豆:255 (菜鸟二级) | 2016-08-10 21:32
0

两个DIV换一下顺序就可以了,下一题

之奇一昂 | 园豆:1421 (小虾三级) | 2016-08-11 08:28

这就是右浮动的在前面

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-11 15:13

@世间无码: 让左浮动的在前面会怎么样?

支持(0) 反对(0) 之奇一昂 | 园豆:1421 (小虾三级) | 2016-08-12 08:28

@之奇一昂: 左浮动在前面会自动缩进

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-24 09:28

@世间无码: ?? 那是另一个问题

支持(0) 反对(0) 之奇一昂 | 园豆:1421 (小虾三级) | 2016-08-24 12:57
0

把你写的效果图贴出了看看是啥样,还有你贴出来的样式人家看得不明不白的,不知道是哪里出问题....

随心而动~MF | 园豆:79 (初学一级) | 2016-08-15 12:20
0

你说的错位效果是什么样子的然后在浏览器上查看一下源代码哪里出问题了

Mask1 | 园豆:113 (初学一级) | 2016-08-15 14:51
0

你说的错位是值两张图片左右位置错了吗?如果是的话是因为你第一个div不应该给右浮动

张云山 | 园豆:642 (小虾三级) | 2016-08-17 15:34

两个div不在一个水平线上 

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-24 09:28

@世间无码: 那肯定是你样式有问题,我看结构是没问题的,然后建议你提问的时候最好能附加一张最终想要的效果图,那样问题就很清晰了

支持(0) 反对(0) 张云山 | 园豆:642 (小虾三级) | 2016-08-24 09:31
0

一个div浮动就够了,不需要两个分别浮动

德芙牛奶巧克力 | 园豆:210 (菜鸟二级) | 2016-08-22 18:02
0
<!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>

你试下

carryme15 | 园豆:156 (初学一级) | 2016-08-24 09:26

如果出现图片太大,跑出div.pic的盒子,用overflow:hidden去除溢出盒子的部分,或者将图片设定为父盒子的100%宽度。

支持(0) 反对(0) carryme15 | 园豆:156 (初学一级) | 2016-08-24 09:42
0

我复制你代码是可以运行的 不过我把宽高改掉了,我觉得是宽高出现了问题。 还有,类最好别写这么长。反正我是看着你的CSS好晕。

奋斗的小小牛 | 园豆:207 (菜鸟二级) | 2016-09-08 00:08
0

1、有没有清除img的margin值;

2、如果父级元素没有固定的高度,子元素这个所谓的height:100%没有意义;这设计到浏览器的渲染机制,最终得到的高度是子元素的高度。

bloodymandoo | 园豆:210 (菜鸟二级) | 2016-09-29 19:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册