我的 aside 元素位于底部...它应该在顶部，与我的部分处于同一水平...我做错了什么？？？我希望这两列处于同一水平，所以我在部分和旁边都使用了 float ，但显然不起作用......请帮忙!
我也不能
我的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout with Floats</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<body>
<header>
<h1>Leonardo da Vinci</h1>
<nav>
<ul>
<li><a>Inicio</a></li>
<li><a>Bio</a></li>
<li><a>Obras</a></li>
<li><a>Legado</a></li>
</ul>
</nav>
</header>
<section>
<div class="columnas">
</div>
<div class="columnas">
</div>
<div class="columnas">
</div>
<div class="columnas">
</div>
</section>
<aside>
<div>
</div>
</aside>
</body>
</html>
我的 CSS 代码:
header {
background: black;
color: white;
overflow: hidden;
}
header h1 {
text-align: center;
width: 50%;
margin: 0 auto;
padding: 55px 0 0 0;
text-transform: uppercase
}
header ul {
padding: 0;
list-style: none;
overflow: hidden;
text-align: center;
}
header ul li {
width: 50%;
margin: 0 auto;
display: inline;
text-transform: uppercase;
padding: 5px;
}
section {
width: 45%;
overflow: hidden
float: left;
}
section .columnas {
background: red;
width: 280px;
height: 200px;
margin: 15px 15px 0 0;
float: left;
}
aside {
width: 30%;
float: right;
}
aside div {
background: blue;
width: 200px;
height: 200px;
最佳答案
如果我理解正确，如果这是 solution你想，你只是在隐藏后少了一个分号。
section {
width: 45%;
overflow: hidden
float: left;
}
您可以添加 margin-top: 15px 到 aside 以获得准确的水平。
aside {
width: 30%;
float: right;
margin-top: 15px;
}
关于html - 我想使用 float 并排放置两列，但其中一列未正确放置...为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48433459/