我是网络开发领域的一名新生。我正在尝试创建一个用于个人学习的静态页面，我需要将图像留在菜单下方的左侧，但是，我已经尝试了我知道的表格并且都继续出现相同的错误，所以我相信有人这里可以回答我。有人可以帮助我吗？
这是html代码:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Home</title>
<link rel="shortcun icon" type="image/x-png" href="_imagens/icone-adv6.png"/>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="_css/estilo.css">
</head>
<body>
<header class="header">
<!-- inicio menu -->
<div class="logo">
<a href="index.html"><img src="_imagens/iconadv6.png"></a>
</div>
<nav>
<ul>
<li><a href="#"><p class="gilroy-bold">equipe</p></a></li>
<li><a href="#"><p class="gilroy-bold">cases</p></a></li>
<li><a href="#"><p class="gilroy-bold">agência</p></a></li>
</ul>
</nav>
<!-- fim menu -->
</header>
<div class="zoom">
<img src="_imagens/predio.png">
<div class="text-item">
</div>
<div id="tituloadv6">
<h1><p class="gilroy-bold">Somos a <br />ADV6</h1></p>
</div>
<div id="texto1">
<h3><p class="gilroy-bold">Não fazemos a menor ideia. <br />Fazemos a maior.</h3></a>
</div>
<div id="texto2">
<p class="gilroy-bold">Passa aqui! <br/> Tem playstation, café, <br />cerveja e muita criatividade. </a>
</div>
</body>
</html>
这是 CSS 代码:
@font-face{
font-family: "gilroy-bold";
src: url("../_fonts/gilroy-bold.ttf");
}
.gilroy-bold{
font-family: "gilroy-bold";
}
.header ul li a:hover {
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #FF8C00;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.zoom {
overflow: hidden;
}
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: right;
margin-top: 40px;
position: relative;
}
.zoom:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#tituloadv6{
margin-left: 60px;
font-size: 30px;
padding-top: 60px;
}
#logo{
padding-left: 20px;
padding-bottom: 0px;
padding-top: 15px;
}
#texto1{
padding-left: 100px;
}
#texto2{
font-size: 13px;
padding-left: 100px;
}
.header{
margin: 0;
padding: 0;
}
nav{
width: 100%;
}
ul{
margin: 5px 5px 5px 10px;
padding: 0px;
padding-bottom: 40px;
list-style: none;
}
li{
float: right;
}
.logo img{
position: absolute;
margin-top: 15px;
margin-left: 10px;
}
nav a{
width: 100px;
display: block;
padding: 20px 15px;
text-decoration: none;
}
最佳答案
将 float: right 更改为 float: left 并将 margin-top: 40px 更改为 margin-top: 100px
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: left;
margin-top: 100px;
position: relative;
}
希望对您有所帮助!
关于html - 我的图片不在左边菜单下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53805530/