html - 流体地铁箱

Question

以下是我的 js fiddle，我在其中填充了以 Metro tile 形式学习的课程。问题是如果文本增加，那么框不会相应地增加其宽度。此外，如果课程名称长度增加，该框应相应地调整自身宽度。

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>