您如何使该页面顶部的图像位置与本示例中文本的对齐方式相同,但文本位于用户屏幕的底部。此外,当它们滚动时,两者都应该是固定的,这样它就不会像固定标题一样消失。
这是非常简单明了的codepen .
HTML:
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="60px" />
<ul>
<li>Overview</li>
<li>About</li>
</ul>
</div>
CSS:
div {
border: 1px solid green;
float: left;
position: fixed;
}
img {
border: 1px solid red;
display: block;
float: right;
ul {
border: 1px solid blue;
display: block;
text-align: right;
}
最佳答案
您需要将 position: fixed;
和 bottom: 0;
添加到您的 ul
元素。
关于html - 图像和文本定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38740169/