图片和文字定位

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; 
}