Question

美好的一天，我创建了一个包含两（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列内容的底部对齐。这是屏幕截图， enter image description here

有人可以解释我为什么会这样做，应该是什么解决方案？谢谢

Answer 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/

显示表css问题iframe

1 个答案: