gpt4 book ai didi

html - 表格布局 - 文本不会停留在 div 的顶部

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

我用两个表格单元格创建了简单的布局。当我添加带 map 的 iframe 时,红色 div 中的文本会移动到该 map 下方,但我希望它保持在顶部。我在这里做错了什么?谢谢。

https://jsfiddle.net/skp114ab

HTML:

  <div class="container">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>
<div class="block">
text
</div>
</div>

CSS

.container {
display: table;
width: 100%;
height: 100%;
position:absolute;
}

.map {
background-color: blue;
display: table-cell;
}
.block {
background-color: red;
width: 300px;
display: table-cell;
}

最佳答案

vertical-align: top 添加到.block。更新 fiddle

关于html - 表格布局 - 文本不会停留在 div 的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38422420/

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