Question

Salam（意为你好）：）

我有以下简单的布局，问题是向right div添加内容会使左边的内容下降：

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent{
            width:800px;
            height:100px;
            display: inline-table;
            border: 1px solid #e8e8e8;
            background: #fcfcfc;
        }
        .parent .right{
            width:90px;
            display:table-cell;
            padding-top: 10px;
            text-align: center;
            background: #f5f5f5;
            color:#666666;
        }
        .parent .left{
            width:710px;
            display:table-cell;
            padding-top: 0px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left">
        This cell has padding-top:0px
    </div>
    <div class="right">
        <img src="images/icon.png">
        <br>some text
    </div>
</div>
</body>
</html>

Answer 1

由于您拥有此属性display:table-cell，因此内部内容已垂直对齐，默认情况下为baseline，请参阅更多here。

您可以将此值替换为top或middle：

.left, .right {
   vertical-align:middle;
}

演示 http://jsfiddle.net/Svdm4/2/

简单显示有问题：表格布局

1 个答案: