CSS常见的布局方式，限时福利

作者：System 时间：2024年08月14日分类：所有,css 字数：1363

这篇文章距离上次修改已过259天，其中的内容可能已经有所变动。

CSS 提供了多种方式来进行页面布局，以下是一些常见的布局方式：

.float-left {
  float: left;
}

.float-right {
  float: right;
}

<div class="float-left">左边内容</div>
<div class="float-right">右边内容</div>

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1; /* 可以根据需要分配空间 */
}

<div class="flex-container">
  <div class="flex-item">项目 1</div>
  <div class="flex-item">项目 2</div>
  <div class="flex-item">项目 3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 定义三列 */
}

<div class="grid-container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

.table-layout {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  padding: 10px;
}

<div class="table-layout">
  <div class="table-cell">单元格 1</div>
  <div class="table-cell">单元格 2</div>
  <div class="table-cell">单元格 3</div>
</div>

.absolute-position {
  position: absolute;
  top: 10px;
  left: 10px;
}

<div class="absolute-position">绝对定位内容</div>

以上代码展示了如何使用不同的CSS技术进行布局。在实际应用中，你可以根据具体需求选择最适合的布局方式。