html - 在 CSS 中使用位置并计算高度
问题描述
我已将 img 宽度设置为 100%,所以我不知道 img 的高度。我正在尝试使用绝对位置和顶部在 img 的末尾设置一个 div。我们可以使用calc()吗?或者另一种方法。
注意:我已将 img 位置设置为固定。
<div class="container">
<img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
<div class="to-image-bottom">I'm div at the bottom of image</div>
解决方案
您可以使用bottom
而不是top
定位元素。还使用底部 div 的包装器将其显示在图像之外。例如:
/* Container for image and bottom div */
.container{
position: relative;
/* For display content outside of image */
overflow: visible;
}
/* Image Styles */
.container .image{
width: 100%;
}
/* Wrapper for bottom div for align to bottom */
.container .to-image-bottom-wrapper{
position: absolute;
width: 100%;
bottom: 0;
}
/* Bottom Div */
.container .to-image-bottom-wrapper .to-image-bottom{
position: absolute;
top: 0; /* position relative to wrapper */
width: 100%;
background: red;
color: white;
text-align: center;
}
<div class="container">
<img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
<div class="to-image-bottom-wrapper">
<div class="to-image-bottom">I'm div at the bottom of image</div>
</div>
</div>
为在图像外显示 div 进行了编辑
推荐阅读
- c - 我被困在循环条件中使用的错误变量'n'和'm'没有在循环体中修改
- java - 如何登录到字符串?有没有办法将每个控制台输出捕获到单个字符串中?
- c# - 以 uint16 格式检索 WMI 查询信息 c#
- google-apps-script - 在新的脚本编辑器中为 Google 表格创建和测试插件
- python - 滚动一个在 Python 中使用 Selenium 进一步加载的元素
- c# - 并行运行异步查询 (IAsyncEnumerable)
- google-apps-script - 您如何使用应用脚本查找和替换字符?
- multiprocessing - 多处理异步:生产者-消费者模型
- c - How to access elements of array when parameter is double pointer?
- node.js - 从 shell 脚本自动化 Node.js CLI 程序