CSS定位問題與幀

我想爲整個.content div設置background-color:#000。我爲圖像製作了一個框架，並且它完美地包裹了圖像（http://jsfiddle.net/Yuaq8/），但前提是該框架的位置設置爲absolute。在這種情況下，.content未正確填充。CSS定位問題與幀

如果我刪除this fiddle中屬於.pic-frame的位置屬性，將填充.content div，但該框架看起來很奇怪。我怎麼能讓框架看起來像第一個小提琴中的那個，所以它會填充整個.content div？

來源

2012-08-05 treng

您應該更正問題標題中的拼寫。我不認爲「posiotioning」是一個詞，但我可能是錯的。 – 2012-08-05 23:02:48

position:absolute會將您的元素從流中移除。使用position:relative或display:inline-block代替上.pic-frame：

.pic-frame { 
    display:inline-block; 
    padding:12px;background-color: #DDD; 
}

Demo

來源

2012-08-05 23:08:06 Zeta

http://jsfiddle.net/Yuaq8/3/'position：relative' does not work there – treng 2012-08-05 23:13:19

@riwette：嗯，它確實有效，'.content'填寫正確，是不是;）？在開玩笑的時候，你需要設置一個固定的'width'和'height'或者簡單地使用上面給出的第二個解決方案（'display：inline-block'）。 – Zeta 2012-08-05 23:14:45

謝謝！ 'display：inline-block'是很好的解決方案 – treng 2012-08-05 23:18:16

嘗試設置寬度.PIC幀。 JS Fiddle

來源

2012-08-05 23:25:20 Harangue

或者您可以在pic.frame div中將寬度設置爲200px，並從#pic div中移除寬度和邊距屬性。

.pic-frame { 
    width: 200px; 
    padding:12px;background-color: #DDD; 
} 
#pic { 
    height:200px; 
    background-color: #999; 
}

來源

2012-08-05 23:33:10 rattanak

CSS定位問題與幀

回答

相關問題