html - 图像和文本定位

Question

您如何使该页面顶部的图像位置与本示例中文本的对齐方式相同，但文本位于用户屏幕的底部。此外，当它们滚动时，两者都应该是固定的，这样它就不会像固定标题一样消失。

这是非常简单明了的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;
}

Answer 1

您需要将 position: fixed; 和 bottom: 0; 添加到您的 ul 元素。