DIV-寬度減小到其內容的寬度或以上內容的寬度/低於

Question

如果你想在這個的jsfiddle看一看：

http://jsfiddle.net/v5GXT/1/

<div class="text"> 
    <div id="image">this is an image with unknown width</div> 
    This is some text above,This is some text above,This is some text above,This is some text above,This is some text above,This is some text above, 
    <div class="code">special content</div> 
    and this is some text below,and this is some text below,and this is some text below,and this is some text below,and this is some text below, 
</div> 

的CSS：

.text{ 
    color:red; 
    text-align:justify; 
    margin-top:20px; 
} 

.code{ 
    border:1px solid blue; 
    border-left:10px solid #ccc; 
    background:#eee; 
    padding:5px; 
    margin:5px; 
} 
.code:before{ 
    display:block; 
    font-size:80%; 
    font-style:italic; 
    content:"Example:"; 
    margin-bottom:5px; 
} 

#image{ 
    float:right; 
    border:2px solid red; 
    height:150px; 
    width:150px; 
    margin-left:40px; 
} 

我希望藍色的div框（特殊內容）的寬度與上面/下面的文字相同，或者它的內容的寬度，無論哪個更容易。爲什麼這個div與屏幕一樣寬？

任何建議什麼是最好的方法？

EDIT1： 簡單的解決方案，具有溢出： http://jsfiddle.net/v5GXT/6/

.code{ 
    border:1px solid blue; 
    border-left:10px solid #ccc; 
    background:#eee; 
    padding:5px; 
    margin:5px; 
    overflow-x: hidden; 
} 

Answer 1

我要藍色的div盒（特殊內容）是相同的寬度 文本高於/低於

你可以添加overflow-x: hidden;到.code div元素隱藏水平溢出如下：

.code { 
    border:1px solid blue; 
    border-left:10px solid #ccc; 
    background:#eee; 
    padding:5px; margin:5px; 

    overflow-x: hidden; 
} 

WORKING DEMO。

Answer 2

這麼多不同的方式來做到這一點，這是最簡單的人之一：

附上.code在塊級div，使.code的inline-block

HTML：

<div class="codeContainer"> 
    <div class="code">special content</div> 
</div> 

CSS：

.codeContainer { 
    display: block; 
} 

.code { 
    display:inline-block; 
    width:auto; 
    border:1px solid blue; 
    border-left:10px solid #ccc; 
    background:#eee; 
    padding:5px; 
    margin:5px; 
} 

DEMO：http://jsfiddle.net/v5GXT/13/

Answer 3

檢查此fiddle

CSS變化

.code{ 
margin: 5px 190px 0 0; 
}