Question

我正在尝试使父div适合它显示的图像的宽度。我这样做有很多麻烦，似乎自动调整到非常大。

内容是正文部分

图像是图像包含在

中的白框

image img是盒子内部的实际图像。

CSS：

html, body
{
    margin:0;
    padding:0;
    border:0;
    height:100%;
    width:100%;
}

body
{
    background-image: url('./page_bg.gif');
    background-repeat: repeat;
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
    font-size:12px;
}

#navlinks
{
    width: 100%;
    height: 28px;
    line-height: 28px;
    background-color: #000;
    color: #FFF;
}

#links
{
    list-style-type: none;
    float: left;
    padding-left: 5px;
    margin: auto;
}

#links li
{
    float: left;
    padding-left: 5px;
    padding-right: 5px;
}

#content
{
    display: block;
    padding: 40px 40px 40px 40px;
}

#image
{
display: inline-block;
border: 1px solid #CCC;
border-color: #CCC #AAA #AAA #CCC;
padding: 3px;
margin-left: auto;
margin-right: auto;
background: #fff;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
max-width: 1107px;
}

#image img
{
}

Answer 1

请尝试float:left您的父div

Answer 2

您可以尝试将#image设置为display: inline-block。我可能错了，但我认为那就是你要找的东西。

以下是一个链接示例：http://jsfiddle.net/RBWYL/

父宽度不适合子宽度css

2 个答案: