gpt4 book ai didi

html - 将图像放在页面的右侧

转载 作者:行者123 更新时间:2023-11-28 15:59:25 26 4
gpt4 key购买 nike

所以我有这个 Html 和 CSS 网页,我有这个联系页面。但是我有这张图片我想放在页面的右侧,但是如果我这样做:float: right; 它似乎不起作用。我也试过对齐,但显然唯一接近的是 text-align。如果需要,这是我的代码(HTML): CherryPlays 罗布洛克斯

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

如果能得到所有帮助,我将不胜感激!

最佳答案

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

关于html - 将图像放在页面的右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40443844/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com