父寬度不適合子寬度css

我想讓父div適合它的寬度顯示圖像。我這樣做很麻煩，它似乎自動調整到非常大。父寬度不適合子寬度css

內容是所述主體部分

圖像是白框圖像被包含在

圖像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 
{ 
}

來源

2012-11-29 MysteryDev

你可以嘗試設置#image到display: inline-block。我可能是錯的，但我想'那就是你想要的。

這裏是一個鏈接的例子：http://jsfiddle.net/RBWYL/

來源

2012-11-29 01:53:49 subhaze

這也起作用了，但它似乎忽略了餘裕和餘量正確的CSS。 – MysteryDev

我注意到你想要它從另一個評論爲中心，並正在研究這個http://jsfiddle.net/RBWYL/2/show/我認爲這應該工作到IE 8。檢查來源http：// jsfiddle .net/RBWYL/2 /讓我知道，如果這將工作亞 – subhaze

我得到你想要做的。有另一種方法嗎？這就是發生了什麼事情：http://puu.sh/1vszn – MysteryDev

請儘量float:left父DIV

來源

2012-11-29 01:51:43 jec

嘿，那工作！現在我只需要以某種方式將該div中心化。 IE瀏覽器：http://puu.sh/1vsbW – MysteryDev

父寬度不適合子寬度css

回答

相關問題