Question

我用矩形div创建了一个字段。当我把一些内容放入矩形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

将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

Answer 2

将 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;
}

如何避免搞乱形成？

2 个答案: