gpt4 book ai didi

html - 显示表 css 问题 iframe

转载 作者:太空宇宙 更新时间:2023-11-03 18:17:45 24 4
gpt4 key购买 nike

美好的一天,我正在创建一个包含两 (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

有人可以向我解释为什么会这样吗?解决方案应该是什么?谢谢

最佳答案

你必须在 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com