0

我正在尝试显示以页面为中心的图像，该页面的边框应该在其一侧具有不同的填充和边距。图像将具有不同的宽度和高度。所以我需要它相应地伸展。

我把它放在正文中以删除所有边距：

body {
    margin:0px 0px;
    padding: 0px;
    }

然后我用它在图像周围放置边框。

#imgcontainer {
    position:relative;
    text-align: center;
    border-color: red;
    border-width: 1px;
    border-style: solid;
    padding: 5px;
}

但随后边框延伸到整个页面。有什么办法可以阻止他的吗？如果我放：

position:relative;

边框对齐到位，但图像不再居中。

如果我在#imgcontainer 周围放置一个容器框，它也会吸附到页面的边缘。

我认为它可以简单地通过一些位置组合来解决：相对/绝对？

这就是我所说的：http: //kareldc.com/dislexicon/1-motion.html

谢谢！

4

4 回答 4

1

嗨，现在根据@Fabrizo Calderan 定义

像这样的css

#imgcontainer {
display:inline-block;
vertical-align:top; 
}

比你的结果

在此处输入图像描述

于 2012-09-11T08:43:50.123 回答
0

如果我很好理解你可以分配display: inline-block给的问题#imgcontainer，否则发布一个显示问题的小提琴

于 2012-09-11T08:29:20.407 回答
0

您可以仅将边框效果应用于 img 标签。

例如，只要把

#imgcontainer img { 
      border-color: red;
      border-width: 1px;
      border-style: solid;
     }
于 2012-09-11T08:42:18.737 回答
0

这是给您的答案：小提琴示例

于 2012-09-11T08:42:36.877 回答