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定位问题与帧

回答

相关问题