学习DIV+CSS网页布局之两列布局

学习 DIV + CSS 网页布局

1. 两列布局

1.1 HTML结构

<div class="main">

  <p>主要内容区域</p>
</div>
<div class="sidebar">
  <p>侧边栏区域</p>
</div>

HTML结构非常简单，只需两个div，分别设置 class 为 main 和 sidebar。

1.2 CSS样式

首先，我们将两个div设置为内联块元素，让它们并排显示：

.main, .sidebar {
  display: inline-block;
  width: 49%;
  vertical-align: top;
}

由于两个div宽度的百分比为49%，因此它们之间有一小段空隙。为了让两个div紧密排列，我们可以设置负的左边距：

.main {
  margin-left: 10px;
}
.sidebar {
  margin-right: 10px;
}

最后，我们可以为整个布局添加上下边距和底部边框：

.container {
  margin: 20px 0;
  border-bottom: 1px solid black;
}

这样，两列布局就完成了！

1.3 完整代码

下面是完整的 HTML 和 CSS 代码：

<div class="container">

  <div class="main">
    <p>主要内容区域</p>
  </div>
  <div class="sidebar">
    <p>侧边栏区域</p>
  </div>
</div>

.main, .sidebar {
  display: inline-block;
  width: 49%;
  vertical-align: top;
}
.main {
  margin-left: 10px;
}
.sidebar {
  margin-right: 10px;
}
.container {
  margin: 20px 0;
  border-bottom: 1px solid black;
}

这样，我们就做出了一个简单的两列布局。