如何避免混乱格式化？

Question

我用矩形div制作了一个字段。当我将一些内容放入矩形区域时，格式化会变得混乱起来。如何解决它？ Here is a link

<div class = 'line' id = 'line1'> 
    <div class ='cell top_cell left_cell' id = 'l1c1'> <font size = "6">&bull;</font></div> 
    <div class ='cell top_cell' id = 'l1c2'></div> 
    <div class ='cell top_cell' id = 'l1c3'></div> 
    <div class ='cell top_cell' id = 'l1c4'></div> 
    <div class ='cell top_cell right_cell' id = 'l1c5'></div> 
</div> 

CSS

.cell { 
    background:#F593D1; 
    Width:50px; 
    Height:50px; 
    border-radius:6px; 
    border: 1px solid; 
    -webkit-border-radius:6px; 
    -moz-border-radius:5px; 
    -khtml-border-radius:10px; 
    display:inline-block; 
    opacity: 0.7; 
} 

Answer 1

添加overflow:hidden;到.top_cell

FIDDLE DEMO

.top_cell { 
    margin-top: 10px; 
    overflow:hidden; 
} 

或者vertical-align:top;到.cell

FIDDLE DEMO

.cell { 
    background:#F593D1; 
    width:50px; 
    height:50px; 
    border-radius:6px; 
    border: 1px solid; 
    -webkit-border-radius:6px; 
    -moz-border-radius:5px; 
    -khtml-border-radius:10px; 
    display:inline-block; 
    opacity: 0.7; 
    vertical-align: top; 
} 

Answer 2

添加vertical-align财产为.cell规则集，并设置其属性为比baseline以外的任何值。例如：

.cell { 
    vertical-align: top; 
    background:#F593D1; 
    width: 50px; 
    height: 50px; 
    border-radius:6px; 
    border: 1px solid; 
    -webkit-border-radius:6px; 
    -moz-border-radius:5px; 
    -khtml-border-radius:10px; 
    display:inline-block; 
    opacity: 0.7; 
} 

Demo。