css三栏等分布局中间还有间距

三栏等分布局在网页设计中非常常见，通常指页面主体内容位于页面中央，左右两侧分别为导航菜单栏和广告栏。今天，我们来分享一种有间距的三栏等分布局，让页面看起来更加精致美观。
首先，我们需要在HTML中创建三个div容器，用于承载左侧导航、中间内容和右侧广告栏。代码如下：

<div class="container">
  <div class="nav">
    <p>导航栏</p>
  </div>
  <div class="content">
    <p>主要内容</p>
  </div>
  <div class="ad">
    <p>广告栏</p>
  </div>
</div> 

接下来是CSS的核心代码。我们将给三个容器设置行内块元素属性，然后用calc函数来动态计算宽度，从而实现等分布局。同时，我们还会用margin属性为中间内容容器设置间距，让页面呈现精致的效果。代码如下：

.container {
  width: 100%;
  font-size: 0; /* 通过设置字体大小为0，来消除容器行内块元素之间的间隙 */
}

.nav,
.content,
.ad {
  display: inline-block;
  vertical-align: top; /* 设置垂直对齐方式为顶部，以保持三个容器同一水平线上 */
  width: calc(33.33% - 10px); /* 使用calc函数来动态计算容器宽度，同时减去间距10px */
  height: 300px;
  background-color: #eee;
}

.content {
  margin: 0 5px; /* 为中间内容容器设置间距 */
} 

这样一来，我们就完成了一个有间距的三栏等分布局。你可以根据自己的需求来调整容器宽度、间距和高度，从而实现不同风格的页面布局。