Fluid metro box

Question

以下是我在js小提琴中填充在地鐵瓷磚窗體中採取的課程。問題是如果文本增加，那麼該框不相應地增加其寬度。此外，如果課程名稱長度增加，該框應相應地調整其寬度。

http://jsfiddle.net/WFZ3d/

<div style="width: 400px; 
"> 
<div style=" 
background-color:#2B547E; 
color: white; 
padding: 20px; 
-webkit-border-top-left-radius: 5px; 
-webkit-border-top-right-radius: 5px; 
-moz-border-radius-topleft: 5px; 
-moz-border-radius-topright: 5px; 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
"> 
    Courses 
</div> 
<div style="-webkit-border-bottom-right-radius: 5px; 
-webkit-border-bottom-left-radius: 5px; 
-moz-border-radius-bottomright: 5px; 
-moz-border-radius-bottomleft: 5px; 
border-bottom-right-radius: 5px; 
border-bottom-left-radius: 5px; border:1px solid #CCC; padding:10px;"> 

<div style="margin:5px;padding:10px; background-color:#3ea055; color:white; font-size:20px; width:60px; 
    height:60px; 
    max-width:auto; 
    ">Mathhhhh</div> 

</div> 
</div> 

Answer 1

普羅蒂普：分開你的DOM元素和風格。內聯樣式不是一個好主意。

你的問題是你正在設置框的寬度。您需要將該框更改爲內聯塊。

我更新了你的小提琴 - http://jsfiddle.net/WFZ3d/2/

<div style="margin:5px;padding:10px; background-color:#3ea055; color:white; font-size:20px; height:60px; display: inline-block;">Mathhhhh</div>