把图片放在页面的右侧

所以我在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

把图片放在页面的右侧

回答

相关问题