亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何把一個大于父元素的div居中,并隱藏多余部分?

如何把一個大于父元素的div居中,并隱藏多余部分?

熠熠生陽 2016-05-04 22:38:00
?子元素居中,隱藏黃色部分,求問有哪些方法如中間的圖片效果
查看完整描述

5 回答

?
不拘藝格

TA貢獻12條經驗 獲得超8個贊

定位。

父級應用相對定位position:relative;,子級應用絕對定位position:absolute;,并且用外邊距應用負的子級寬度的一半(margin-left:-(子級寬度/2)單位),居上下位置和左右的方法相同。

并且父級還要應用溢出隱藏屬性:overflow:hidden;。

代碼如下:

.divFather?{?width:400px;?height:500px;?position:relative;?overflow:hidden;}
.divSon?{?width:500px;?height:300px;?position:absolute;?top:50%;left:50%;?margin:-150px?-250px;}


查看完整回答
1 反對 回復 2016-05-05
?
炎瓚

TA貢獻5條經驗 獲得超2個贊

1、我不知道你為什么要這樣做,沒有實戰的意義。你完全可以用兩個同級元素來做這樣的效果;margin或padding,z-index;如果想把他們做成一個整體,你可以在外面包裹一層,以免他們受影響;

2、你子元素在父元素中,想要兩邊都超過父元素,你就需要子元素脫離文檔流,脫離當前的層級關系。用定位來做;

3、其它的我沒想到了。

查看完整回答
1 反對 回復 2016-05-04
  • 熠熠生陽
    熠熠生陽
    嗯,這樣做是為了完成一個設計稿作業,要用響應式布局隱藏部分元素,并且不能出現橫向滾動條
?
熠熠生陽

TA貢獻11條經驗 獲得超3個贊

寫好了:

.g-bd .m-workplace { width: 1200px; overflow: hidden; position: relative; margin: 0; padding: 0; }

.g-bd .m-workplace .box { position: absolute; left: -50%; margin-left:600px; width: 1616px; }

還有什么方法嗎?

查看完整回答
反對 回復 2016-05-04
?
熠熠生陽

TA貢獻11條經驗 獲得超3個贊

是不是父元素相對定位,子元素絕對定位.子元素left設置-50%,在向右父元素一半長度,可是寫出來運行錯誤.是不是中間還要加個div

查看完整回答
反對 回復 2016-05-04
  • 炎瓚
    炎瓚
    相對定位:你需要在父元素的上級,找到參照;絕對定位:是相對于body的(0,0) 你這應該是子元素相對定位(相對于父元素)
  • 5 回答
  • 0 關注
  • 3152 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號