在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 為什么padding-left有效，padding-right無效？

為什么padding-left有效，padding-right無效？

clipboard.png

左右都有padding 為什么右側padding沒有占據(jù)空間？
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%或更小，發(fā)現(xiàn)其實未顯示的部分是在視口之外。
2.另一種是將父元素設為border-box

但是產生這種現(xiàn)象的原因還未知。

回答
編輯回答
影魅

其實右側也是也是有padding的，你的layout-cup-r盒子設置了padding-right后，l-right也設置了margin-right，l-right盒子向右邊移動的單位正好是你的padding-right,所以視覺上并沒有看出來。你去掉margin-right就看的到了
哦對。。還有就是你的l-main盒子是100%，他會使得盒子占據(jù)父盒子的所有寬度，如果不加margin-right, l-right盒子會掉下去。你需要設置成一個更小一點讓兩個盒子的寬度加起來小于父盒子。

2017年8月17日 22:29
編輯回答
陌南塵

截圖顯示有,肯定是其他樣式互相沖突了,視覺上看不出來.
需要看代碼,代碼......

實際上你的問題可以簡化一下

描述

正常情況下

  • 子元素浮動以后
  • 是要緊挨著父元素的包含框
  • 這里的子元素的右邊為什么挨著父元素的邊框了呢

代碼

<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%這個東西的影響..具體為什么我也搞不懂.求解釋

2018年3月15日 11:22
編輯回答
離觴

頁面的默認文本方向是從左到右，所以一般布局上不能同時滿足left和right時，left的優(yōu)先級會比right高
你提供的信息有限（不知道父元素和子元素的布局），所以就不清楚是否達到了上面說的情況
你可以試下下面的設置，將文本方向換一下，看看是不是right優(yōu)先級變高了

document.documentElement.dir = 'rtl'
2018年9月15日 16:47