左右两栏布局常用方法及代码实现

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>
<p><style>
.container {
overflow: hidden; /<em> 清除浮动 </em>/
}
.left {
float: left;
width: 200px;
background-color: #f0f0f0;
}
.right {
margin-left: 200px;
background-color: #e0e0e0;
}
</style></p>

<div class="flex-container">
  <div class="sidebar">侧边栏</div>
  <div class="main-content">主内容区</div>
</div>
<p><style>
.flex-container {
display: flex;
}
.sidebar {
width: 250px;
background-color: #ddd;
}
.main-content {
flex: 1; /<em> 占据剩余空间 </em>/
background-color: #f9f9f9;
}
</style></p>

<div class="grid-container">
  <div class="left-pane">导航或菜单</div>
  <div class="right-pane">内容展示</div>
</div>
<p><style>
.grid-container {
display: grid;
grid-template-columns: 250px 1fr; /<em> 左栏固定，右栏自适应 </em>/
gap: 10px;
}
.left-pane {
background-color: #eee;
}
.right-pane {
background-color: #fafafa;
}
</style></p>

<div class="table-container">
  <div class="col-left">左侧栏</div>
  <div class="col-right">右侧栏</div>
</div>
<p><style>
.table-container {
display: table;
width: 100%;
}
.col-left {
display: table-cell;
width: 200px;
background-color: #f2f2f2;
}
.col-right {
display: table-cell;
background-color: #fff0f0;
}
</style></p>