Question

我想要的是如果可以制作2个带有固定机智和流畅内容的侧边栏！例如，我将使用hide＆amp;显示侧边栏......在我向左或向右隐藏后，内容变得流畅！

    /* Middle
    -----------------------------------------------------------------------------*/

    .middle2 {

      /* border-left: 290px solid #B5E3FF; */

      /* border-right: 290px solid #FFACAA; */

      position: relative;

    }

    .middle2:after {

      display: table;

      clear: both;

      content: '';

    }

    .container2 {

      width: 100%;

      float: left;

      overflow: hidden;

      margin-right: -100%;

    }

    .content2 {

      /* padding: 0 20px; */

    }

    /* Left Sidebar
    -----------------------------------------------------------------------------*/

    .left-sidebar {

      float: left;

      width: 290px;

      position: relative;

      background: #B5E3FF;

      /* left: -290px; */

    }

    /* Right Sidebar
    -----------------------------------------------------------------------------*/

    .right-sidebar {

      float: right;

      /* margin-right: -290px; */

      width: 290px;

      position: relative;

      background: #FFACAA;

    }

    .wrapper {

      width: 993px;

      margin: 0 auto;

    }

<div class="wrapper">
  <div class="middle2">
    <div class="container2">
      <aside class="left-sidebar">
        asd</aside>
      <main class="content2">
      </main>
      <!-- .content -->

      <aside class="right-sidebar">
        asd</aside>
    </div>
    <!-- .container-->
  </div>
</div>

我不知道为什么但不适合我！

Answer 1

我相信你正在寻找类似的东西：

<html>
<head>
<style type="text/css">
.middle-content {
   display: block;
}

.left {
   background-color: blue;
   width: 200px;
   float: left;
}

.right {
   background-color: red;
   width: 200px;
   float: right;
}
</style>
</head>
<body>

    <aside class="left">
      Left Bar
    </aside>
    <aside class="right">
      Right Bar
    </aside>
    <div class="middle-content">
      Content
    </div>

</body>
</html>

在这里演示：https://jsfiddle.net/j75x4Lqm/

Answer 2

Flexbox真的为您解决了这个问题，得到了广泛的支持（http://caniuse.com/#feat=flexbox）。如果您以前没有使用它，CSS-Tricks对其属性和实现有相当不错的解释：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我已经简化了你的CSS，我相信，在这里得到了你想要的结果：http://codepen.io/angeliquejw/pen/MyJGzN?editors=0100

您需要将display:flex添加到父容器中，如果您希望侧边栏始终为290px，请阻止它们通过flex:0 0 auto增长和缩小。 main将占用所有其他空间。

2个侧边栏（左侧和右侧固定Witdh）和流体内容

2 个答案: