圖片和文字定位

您將如何使該頁面頂部的圖像位置與本示例中文本的排列方式相同，但文字位於用戶屏幕的底部。另外，當它們滾動時，兩者都應該固定，以便它永遠不會像固定標題那樣消失。圖片和文字定位

這裏是非常簡單和普通的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; 
}

來源

2016-08-03 ERIC

那麼爲什麼不使用固定的定位......這似乎是你所追求的？ –

我試過了，但是我無法得到任何東西上班哈哈我已經在這裏超過4個小時了。也許我只是在笑得可笑，想念一些超級明顯的東西。 – ERIC

＆我已經爲div使用了固定位置。 – ERIC

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

來源

2016-08-03 10:00:34

這確實將文本放到底部，但徽標不再與文本的右側對齊。 – ERIC

對不起編輯，只是想知道會發生什麼大聲笑。 – ERIC

這段代碼可以幫助你： 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; 
}

來源

2016-08-03 10:28:06 Madhav

嗯，沒有爲我工作。你可以發佈一個jsfiddle/codepen的工作代碼嗎？我甚至調整了html以適合你的課程。 – ERIC

這是我用你的代碼製作的鋼筆：http://codepen.io/ericshio/pen/mEGzYv – ERIC

圖片和文字定位

回答

相關問題