为什么padding-left有效,padding-right无效?

clipboard.png

左右都有padding 为什么右侧padding没有占据空间?
clipboard.png

html

<div class="layout-cup-r clearfix">
    <div class="l-main">main</div>
    <div class="l-right">right</div>
 </div>

css

.layout-cup-r {
    width:100%;
    padding-right: 210px;
    .l-main {
      width: 100%;
      float: left;
      height: 200px;
      background-color: #eee;
    }
    .l-right {
      width: 210px;
      height: 200px;
      background-color: #d2d2d2;
      float: right;
      margin-right: -210px;
    }
  }

解决

1.父元素宽度不设或设为80%或更小,发现其实未显示的部分是在视口之外。
2.另一种是将父元素设为border-box

但是产生这种现象的原因还未知。

阅读 17.6k
3 个回答

截图显示有,肯定是其他样式互相冲突了,视觉上看不出来.
需要看代码,代码......

实际上你的问题可以简化一下

描述

正常情况下

  • 子元素浮动以后
  • 是要紧挨着父元素的包含框
  • 这里的子元素的右边为什么挨着父元素的边框了呢

代码

<div style="width:100%;padding:0 200px;">
    <div style="width:100%;background-color:red;height: 200px;float: left;"></div>
</div>

解决

  1. 取消父元素的width:100%属性.
  2. 给父元素添加box-sizing:border-box;
  3. 让父元素变成一个模型框

原因

firfox下面没有这个异常,只是在chorme下面有这个问题
这个可能和浏览器的渲染原理有关吧,标准盒模型和IE盒模型下,再加上width:100%这个东西的影响..具体为什么我也搞不懂.求解释

页面的默认文本方向是从左到右,所以一般布局上不能同时满足left和right时,left的优先级会比right高
你提供的信息有限(不知道父元素和子元素的布局),所以就不清楚是否达到了上面说的情况
你可以试下下面的设置,将文本方向换一下,看看是不是right优先级变高了

document.documentElement.dir = 'rtl'

其实右侧也是也是有padding的,你的layout-cup-r盒子设置了padding-right后,l-right也设置了margin-right,l-right盒子向右边移动的单位正好是你的padding-right,所以视觉上并没有看出来。你去掉margin-right就看的到了
哦对。。还有就是你的l-main盒子是100%,他会使得盒子占据父盒子的所有宽度,如果不加margin-right, l-right盒子会掉下去。你需要设置成一个更小一点让两个盒子的宽度加起来小于父盒子。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏