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元素。

Answer 2

这段代码可能对您有所帮助： HTML：

<div class="header">
    <span class="block">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="60px" />
    <br/>
        </span>
        <span class="block">
            <ul>
            <li>Overview</li>
            <li>About</li>
        </ul>
            </span>

</div>

CSS：

div.header {
    border: 0px solid green;
    float: left;
    position: fixed;
}
div.header.img {
    border: 5px solid green;
    float: left;
    position: fixed;
}

div.header.ul {
    bottom: 10%;
    /*position: fixed;*/
    border: 1px solid blue;
    display: block;
    text-align: right;
}

span.block {
    display:block;
}

图像＆amp;文字定位

2 个答案: