html - 我想使用 float 并排放置两列，但其中一列未正确放置...为什么？-6ren

html - 我想使用 float 并排放置两列，但其中一列未正确放置...为什么？

转载作者：太空宇宙更新时间：2023-11-04 07:42:02

25

4

我的 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/

25

4

0

文章推荐： javascript - 如何将模态框向下移动

文章推荐： java - 单线程应用程序的 GC 设置

文章推荐： html - 媒体查询有问题

android - 想 toast 的用户名，但是当我尝试登录时却给了我很大的压力
使用登录后，我想吐出用户名。但是，当我尝试单击登录按钮时，它给了我力量。我看着logcat，但是什么也没显示。这种编码是在说。它将根据我在登录屏幕中输入的名称来烘烤用户名。不会有任何密码。
Git:HEAD不见了，想 merge 到master
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎是题外话，因为它缺乏足够的信息来诊断问题。更详细地描述您的问题或include a min

首页

博学

6Ren·AI

商城

html - 我想使用 float 并排放置两列，但其中一列未正确放置...为什么？