主页 / 问题 / 655030
Accepted
Alex
Asked:2020-04-18 11:06:28 +0000 UTC2020-04-18 11:06:28 +0000 UTC

3 列流体布局（内容应首先加载，然后是侧边栏）[关闭]

  • 772

你好。我需要一个 3 列的流体布局：固定宽度的左侧和右侧边栏，内容是流体的。底部页脚。

必须首先加载内容，然后是侧边栏，即 如果我们采用编号左侧边栏 - 1，内容 - 2，右侧边栏 - 3，则所需的块顺序为 2-1-3（下面给出 HTML）或 2-3-1，在极端情况下为 1-2 -3（通常使用 1 -3-2，这个选项不适合我，因为我需要移动版的右侧边栏出现在内容之后）。

<main>
  <header>Header</header>
  <section class="middle clr">
    <section id="block-2" class="content">Content</section>
    <aside id="block-1" class="left">Left sidebar</aside>
    <aside  id="block-3" class="right">Right sidebar</aside>
  </section>
  <footer>Footer</footer>
</main>

对旧浏览器的支持是可取的。

我考虑过绝对定位的选项，但是页脚有问题——你需要不断地找到最大块的高度并设置容器的高度……但是如果js被禁用（很明显这些是非常罕见），那么一切都在堆上....，有时计算块高度会出现问题，特别是如果js页面上有动画/可加载元素......

html

1 个回答

  1. Best Answer

    所以？

    * {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.clr:after {
  content: '';
  display: table;
  clear: both;
}

main {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

header,
footer {
  background: #eee;
}

aside {
  position: relative;
  /* Чтоб z-index сработал */
  width: 200px;
  background: #ccc;
  z-index: 2;
  /* Чтоб было выделение текста, так как aside будет прятаться под .content, размещенный перед ним */
}

.middle {
  white-space: nowrap;
  /* Не дает колонкам уходить друг под друга. Однако, работая с меди запросами, нужно будет убрать данный стиль для более низких разрешений, где нужно будет сайдбары переместить вниз. */
}

.middle>aside,
.middle>section {
  white-space: normal;
  /* Нормализует перенос строк текста. Без него, весь текст пойдет одной сплошной строкой */
}

.content {
  padding: 0 230px;
  display: inline-block;
  /* Задается, чтоб блок расположился между 2 float-ами */
  background: #00CC334D;
}

.left {
  float: left;
  margin-right: -200px;
}

.right {
  float: right;
  margin-left: -200px;
}

@media screen and (max-width:600px) {
  .middle {
    white-space: normal;
  }
  .content {
    padding: 0;
    margin: 0;
  }
  aside {
    width: 50%;
    margin: 0 !important;
  }
}

@media screen and (max-width:420px) {
  aside {
    width: 100%;
    float: none !important;
  }
}
    <main>
  <header>Header</header>
  <section class="middle clr">
    <section class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</section>
    <aside class="left">Left sidebar</aside>
    <aside class="right">Right sidebar</aside>
  </section>
  <footer>Footer</footer>
</main>

    数字不是很清楚，但似乎是正确的。通过浮动布局将适用于所有浏览器。你也可以使用 flexbox，但这并不适合所有人。

    • 6

相关问题