CSS定位框架问题

Question

我想为整个background-color:#000 div设置.content。我为图像制作了一个框架，它完美地包裹了图像（http://jsfiddle.net/Yuaq8/），但前提是框架的位置设置为absolute。在这种情况下，.content未正确填充。

如果我删除this fiddle中属于.pic-frame的位置属性，则会填充.content div，但框架看起来很奇怪。如何使框架看起来像第一个小提琴中的框架，所以它填充整个.content div？

Answer 1

position:absolute会从流中移除您的元素。请在position:relative上使用display:inline-block或.pic-frame：

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

Demo

Answer 2

尝试为.pic-frame设置宽度。 JS Fiddle

Answer 3

或者您可以在pic.frame div中将宽度设置为200px，并从#pic div中删除width和margin属性。

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