双栏布局：灵活掌控，完美呈现！

前端

2023-12-17 18:50:39

左右两栏式布局：经典永存，妙用无穷

灵活多变的左右两栏式布局

在网页设计的广袤天地中，左右两栏式布局以其经典不衰的地位，为网站打造清晰、美观、用户友好的界面。无论是新闻资讯、博客网站还是电商平台，这种布局方式都展现出了无与伦比的适应性和实用性。

Flex布局的强力加持

Flex布局作为CSS3中的一颗耀眼明星，为左右两栏式布局注入了全新的活力。其强大的弹性空间分配能力，让网页设计师可以轻松实现左右栏宽度的自适应调整，从而契合不同屏幕尺寸的显示需求。

传统布局的稳健可靠

除了Flex布局的强势崛起，传统布局方式如float布局和绝对定位，也依然在左右两栏式布局的舞台上扮演着重要的角色。float布局以其简便性著称，而绝对定位则提供了更加精准的控制能力。

实战解析：左右两栏式布局的多种实现

为了帮助大家更好地理解左右两栏式布局的实现方式，我们准备了几个实战案例，囊括了Flex布局和传统布局的不同方案。

1. Flex布局实现：弹性布局，自由组合

/* 父元素设置 flex 属性 */
.container {
  display: flex;
}

/* 左侧栏设置 flex-basis 属性，宽度自适应 */
.left-column {
  flex-basis: 200px;
}

/* 右侧栏设置 flex-grow 属性，宽度随父级变化而变化 */
.right-column {
  flex-grow: 1;
}

2. 传统布局实现：float布局，左右排列

/* 左侧栏设置 float 属性，浮动到左侧 */
.left-column {
  float: left;
  width: 200px;
}

/* 右侧栏设置 float 属性，浮动到右侧 */
.right-column {
  float: right;
  width: calc(100% - 200px);
}

3. 传统布局实现：绝对定位，精准控制

/* 左侧栏设置 position 属性为 absolute，绝对定位 */
.left-column {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100vh;
}

/* 右侧栏设置 position 属性为 absolute，绝对定位 */
.right-column {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 200px);
  height: 100vh;
}