把圖片放在頁面的右側

所以我在Html和CSS中有這個網頁，並且我有這個聯繫頁面。但我有這個圖像，我想把它放在頁面的右側，但如果我這樣做：float: right;它似乎不工作。我也嘗試對齊，但顯然唯一接近的是text-align。如果需要的話，這裏是我的代碼（HTML）： CherryPlaysRoblox 把圖片放在頁面的右側

</head> 
<body> 
    <div class="outer"> 
<ul> 
    <li><a href="home.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="gallery.html">Gallery</a></li> 
    <li><a href="contact.html">Contact</a></li> 
     <p id="Cherry">CherryPlaysRoblox1</p> 
</ul> 
<div class="jumbotron"> 
<h1>Contact</h1> 
<h4>Here are a few ways you can contact me. I will update the page when I change anything.</h4> 
    </div> 
</div> 

<!-- EMAIL --> 
<img src="_gmail.png" alt="gmail" height="30" width="35"> <h4>My email</h4> 
<!-- TWITTER --> 
<img src="_twitter.png.png" alt="twitter" height="35" width="35"> <h4>Username</h4> 
<!-- FACEBOOK --> 
<img src="_facebook.png" alt="facebook" height="35" width="35"> <h4>Username</h4> 
<!-- INSTAGRAM --> 
<img src="_instagram.png" alt="instagram" height="35" width="35"> <h4>Username</h4> 
<!-- ME --> 
<div id="PhotoOfMe"> 
    <img src="_Cherry.png" alt="Me" id="Me"> 
</div> 
</body> 
</html>

我的CSS代碼：

#Cherry { 
    color: black; 
    font-family: 'Happy Monkey', cursive; 
    font-size: 20px; 
}  
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: DarkOrchid; 
    position: fixed; 
    top: 0; 
    width: 100%; 
}  
li { 
    float: left; 
    border-right: 1px solid White; 
}  
li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
}  
li a:hover { 
    background-color: PaleVioletRed; 
}  
.active { 
    background-color: PaleVioletRed; 
}  
/*JUMBOTRON*/ 
.jumbotron { 
    background-color: Sandybrown !important; 
    float: top; 
}  
.jumbotron, p + h1 { 
    color: black !important; 
    font-family: 'Happy Monkey', cursive; 
} 
/*BODY*/ 
body { 
    background-color: Peachpuff !important; 
}  
h2 { 
    font-family: 'Happy Monkey', cursive !important; 
} 
h4 {  
}  
#me { 
    float: right; 
    clear: right; 
}

我想感謝所有幫助我能！

來源

2016-11-05 CherryPlaysRoblox

的（[右使用CSS HTML對齊圖像]可能的複製http://stackoverflow.com/questions/5214893/right-align -an-image-using-css-html） –

爲了正確的浮動，它需要在頂部，然後它會浮動到文檔中的任何後續內容中，所以如果您將#me容器推到#email以上，它將在右側對齊。此外，在您的HTML中，ID是大寫Me，在CSS中是小寫#me。

所以推至頂部並將其更改爲小寫：

... 
<!-- ME --> 
<div id="PhotoOfMe"> 
    <img src="_Cherry.png" alt="Me" id="me"> 
</div> 
<!-- EMAIL --> 
<img src="_gmail.png" alt="gmail" height="30" width="35"> <h4>My email</h4> 
...

來源

2016-11-05 22:27:55 ilwcss

非常感謝！它實際上工作！另外還有一個問題：如果你正在漂浮東西，那麼這個東西是否必須放在中間身體的其他東西之前？ – CherryPlaysRoblox

你的歡迎。它需要在它「浮動」到的元素之前。您可以在MDN https://developer.mozilla.org/en/docs/Web/CSS/float上找到示例。我還建議你看看css flexbox，因爲用它創建多列布局更容易，請看這裏：https://css-tricks.com/snippets/css/a-guide-to-flexbox – ilwcss

Ahhhh！非常感謝！我會完全檢查出來！ – CherryPlaysRoblox

把圖片放在頁面的右側

回答

相關問題