保持侧边两侧的侧边距相等

Question

我试图在每个侧边栏的两侧获得相等的间距。我希望它像：| |侧边栏| |内容| |侧边栏| |。 https://jsfiddle.net/db89880q/ 现在，侧边栏的两侧并没有相同的间距。

.nav_projects {
  top: 30px;
  left: 30px;
  position: fixed;
  top: 50%;
  left: -66px;
}

.nav_studio {
  right: -40px;
  position: fixed;
  top: 50%;

}

Answer 1

您可以使用div中的侧边栏包装内容。然后用margin: 0 auto;定位它。然后在差异内部，您可以使用margin-left和margin-right在内容和两个侧边栏之间留出空间。

Answer 2

我会亲自这样做。

http://codepen.io/midgitsuu/pen/QyOdGd

HTML：

<div class="outer_container">
  <div class="sidebar sidebar_left">
    <p>Left Sidebar</p>
  </div>
  <div class="center_content">
    <p>Center Content</p>
  </div>
  <div class="sidebar sidebar_right">
    <p>Right Sidebar</p>
  </div>
</div>

CSS：

body {
  margin:0;
}
.outer_container {
  width:100%;
  height:500px;
  background:lightgray;
}
.outer_container div {
  height:100%;
}
.center_content {
  display:inline-block;
  width:80%;
  background:blue;
}
.sidebar {
  width:5%;
  background:red;
}
.sidebar_left {
  float:left;
  margin-right:5%;
}
.sidebar_right{
  float:right;
  margin-left:5%;
}

基本上，获取一个设置为100％宽度（主体宽度）的主/外容器，然后调整大小，或者使用最终等于100％的百分比将边距应用于内部的所有内容。这使您的网站响应迅速，但在宽度较低的情况下，您可能希望媒体查询稍微更改布局。我更喜欢在你的情况下使用花车，因为你似乎想要将侧边栏向上推到每一边。