固定宽度自动边距的左边界位置

Question

我有一个居中的页面：

#page-wrap {
     width: 800px;
     margin: 0 auto;
}

这会创建一个像这样的居中布局：

<-- auto --><-----------------    800px    -----------------><-- auto -->

现在我想在页面左侧和右侧附加两个带菜单项的小div：

<-- auto --><-----------------    800px    -----------------><-- auto -->
            <div class="is-left"/>     <div class="is-right"/>

div应该保留在内容之上：

#is-left {
    fixed; 
    top: 0; 
    left: 0; 
}

在添加自动边距之前，可以使用left:0和right:0轻松定位两个div。

如何将div放在固定宽度页面的左右边界？

Answer 1

使用flexbox是当今最好的方法。在这里查看我的示例：http://codepen.io/tomekbuszewski/pen/LGdRLa

我正在创建两个父元素宽度均为50％的盒子。 Flexbox负责将它们放在一起。

#page-wrap {
    display: flex;
    width: 800px;
    margin: auto;
}

.block {
    height: 200px;
    width: 50%;
}

- 编辑 -

不要position: absolute position: fixed进行简单的布局定位，还有其他适当的工具; - ）

Answer 2

由于DIV有固定的位置，您需要使用CSS calc()来定位它们：

div.is-left {
  left: calc(50% - 400px);
}

div.is-right {
  right: calc(50% - 400px);
}

Example Fiddle