html - Css 流元素占用剩余宽度

Question

我拼命地尝试将 div 的大小调整为网站的剩余空间。

我有这样的 HTML

<nav> nnn </nav>
<main> xxx </main>
<aside> aaa </aside>

在普通笔记本上，我将它们显示为三列:

nnn   xxx   aaa
      xxx

但对于手机，我以另一种顺序显示它们， 更像是:

nnn   xxx
aaa   xxx

所以我在我的CSS中做的是

nav {
    float: left
}
main {
    float: right
}

只要我为两者都指定固定宽度(例如各 50%)，此方法就有效。 但我希望 nav/aside 部分为 170px，main 占据剩余空间。

在研究过程中，我发现其他答案说我应该删除 float 属性，但是我无法让 aside 部分出现在导航下方和主要部分的右侧。

我尝试了一些不同的显示样式，例如 display:table-cell(但是 main 没有类似 rowspan 的东西)或 display:inline-block，但我绝对不能让它工作。

希望有人知道我如何在不触及 html 的情况下实现这种布局。

Answer 1

桌面的三列布局可以通过显示表格/表格单元轻松实现。移动布局，需要你将列排列成翻转的 c 形，可以实现如下:

• 将三个 block 放在包装器中
• 使用 margin 将 wrapper 向右推
• 将第一个和第三个 block 向左浮动，使用负边距将它们拉出包装器
• 将第二列向右浮动并使其 100% 宽
• 为包装器添加一个 clearfix(但不能使用 overflow hidden)

nav {
  background: #CCF;
}
main {
  background: #CCC;
}
aside {
  background: #CFC;
}
@media screen and (max-width: 963px) {
  #wrapper {
    margin-left: 170px;
  }
  #wrapper:after {
    content: "";
    display: block;
    clear: both;
  }
  nav, aside {
    float: left;
    clear: left;
    margin-left: -170px;
    width: 170px;
  }
  main {
    float: right;
    width: 100%;
  }
}

<div id="wrapper">
  <nav>nnn</nav>
  <main>xxx<br>xxx</main>
  <aside>aaa</aside>
</div>