我正在尝试安排网站的页脚。
问题似乎出在 float 语句上。 .logo 应该左对齐，但它是右对齐的。
这是 html:
<!doctype html>
<html lang='es'>
<head>
<meta charset='utf-8'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Dulkre</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- HTML Snippet -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="page">
<header>
<img src="./img/logo.png" id="logo" />
<nav>
<ul>
<li class="current">
<a href="#">Home</a>
</li>
<li>
<a href="#">Quienes Somos</a>
</li>
<li>
<a href="#">Productos</a>
<ul>
<li>
<a href="">Endulzantes</a>
</li>
<li>
<a href="">Life con sucralosa</a>
</li>
<li>
<a href="">Clásico</a>
</li>
<li>
<a href="">Fructofibra</a>
</li>
<li>
<a href="">Mate</a>
</li>
<li>
<a href="">Gourmet</a>
</li>
</ul>
</li>
<li>
<a href="#">Recetas</a>
</li>
<li>
<a href="#">Bienestar</a>
</li>
<li>
<a href="#">Contacto</a>
</li>
</ul>
</nav>
</header>
<section id="wrapper">
<article id="slider"></article>
<article id="cuerpo"></article>
</section>
</div>
<footer>
<div id="pie">
<div class="logo">
<img src="./img/logo.png" />
</div>
<div class="copy"></div>
</div>
</footer>
</body>
</html>
这是CSS
footer{ height: 115px; width:100%; background: #aad361; }
footer #pie { width:960px; margin:0 auto; height:115px; }
footer #pie .logo { width:168px; float:left; display: block; }
footer #pie .copy { margin-left: 198px; height:115px; display: block; width:762px; }
知道我做错了什么吗？
这是一个你可以看到所有代码的url
最佳答案
当您应该 float img 时，您正在 float div 元素。
这是正确的代码:
HTML:
<footer>
<div id="pie">
<img class="logo" class="img" src="./img/logo.png" />
</div>
</footer>
还有 CSS:
footer {
height: 115px;
width:100%;
background: #aad361;
}
footer #pie {
width:960px;
margin:0 auto;
height:115px;
}
footer #pie .logo {
width:168px;
float: left;
}
如果您想使用您的代码并获得相同的结果，只需使用:
.footer #pie .logo img {
width:168px;
float: left;
}
关于html - Div不 float ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27894064/