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部分为170像素，main部分为剩余空间。

在研究期间，我发现其他答案说我应该删除浮动属性，但是我不能让旁边的部分显示在导航下方并且直到主要部分。

我尝试了一些不同的显示样式，例如display：table-cell（但是main没有像rowspan那样）或者显示：inline-block但是我绝对无法使它工作。

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

Answer 1

桌面的三列布局可以通过显示表/表格单元轻松实现。移动布局要求您以翻转的c形排列列，可以按如下方式实现：

将三个块放在包装器中
使用边距
向左浮动第一个和第三个块，使用负边距将它们拉出包装器
向右浮动第二列并使其100％宽
向包装器添加clearfix（但不能使用溢出隐藏）

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>

Css流量元素取剩余宽度

1 个答案: