Question

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

我很感激能得到的所有帮助！

Answer 1

为了正确浮动，它需要位于顶部，然后它将浮动到文档中随后出现的任何内容，因此如果您将#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>
...

将图像放在页面的右侧

1 个答案: