以下是我的 js fiddle,我在其中填充以 metro tile 形式参加的类(class)。问题是如果文本增加,则框不会相应地增加其宽度。此外,如果类(class)名称长度增加,则框应相应地调整自身宽度。
<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>
最佳答案
提示:分离您的 DOM 元素和样式。内联样式不是一个好主意。
您的问题是您要设置框的宽度。您需要将框更改为内联 block 。
我更新了你的 fiddle - 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>
关于html - 流体地铁箱,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19251430/