html - 显示表格CSS问题iframe

美好的一天，我创建了一个包含两（2）列的网页。第1列包含一个PDF，我只是使用<iframe>对其进行了嵌入，然后第2列就像一个注释部分。我不知道我的决定是否正确，但是我使用<div>使其成为一个具有两列的表格。

这是HTML代码

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <link rel='stylesheet' type='text/css' href='skin/css/user.css'>
    </head>
    <body>
        <div id='cont'>
            <div class='wrap'>
                <div>
                    <iframe src='upload/1.pdf'></iframe>
                </div>
                <div>
                    THIS IS THE SECOND COLUMN
                </div>
            </div>
        </div>
    </body>
</html>

这是CSS

body,html{
    margin:0;
    height: 100%;
}
#cont{
    display:table;
    width: 100%;
    height: 100%;
}
#cont .wrap{
    display:table-row;
}
#cont .wrap div{
    display:table-cell;
}
#cont .wrap div:first-child{
    width: 70%;
    height: 100%;
}
iframe{
    width:100%;
    height: 70%;
}
#cont .wrap div:last-child{
    background-image:url('../img/user-comment-back.jpg');
    color: white;
    width:30%;

}

布局它没有什么问题，但是问题是第2列内容与第1列内容的底部对齐。这是屏幕截图，

有人可以解释一下为什么会这样吗，应该怎么解决？谢谢

最佳答案

您必须在div中添加vertical-align:top;。当您使用table CSS属性水平对齐2 div时，其行为就像表格和文本从底部开始。

您只需要添加此行；

#cont .wrap div{
    display:table-cell;
    vertical-align:top; /*Added line*/
}

这是一个演示链接。 http://jsbin.com/relutute/1/

关于html - 显示表格CSS问题iframe，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22471198/