html + css 布局技巧总结 ——多列布局，腾讯T3面试官透露

在HTML和CSS中实现多列布局有多种方法，以下是一些常用的技巧和示例代码：

1. Flexbox布局：

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>
 
<style>
.container {
  display: flex;
}
 
.column {
  flex: 1; /* 每列平分空间 */
  border: 1px solid #000; /* 列之间的分隔线 */
  padding: 10px; /* 内边距 */
}
</style>

2. Grid布局：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>
 
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 三列平分容器宽度 */
  grid-gap: 10px; /* 网格间隔 */
}
 
.grid-item {
  border: 1px solid #000; /* 列之间的分隔线 */
  padding: 10px; /* 内边距 */
}
</style>

3. 使用浮动（Float）方法：

<div class="column" style="width: 33.33%; float: left;">Column 1</div>
<div class="column" style="width: 33.33%; float: left;">Column 2</div>
<div class="column" style="width: 33.33%; float: left;">Column 3</div>
 
<style>
.column {
  border: 1px solid #000; /* 列之间的分隔线 */
  padding: 10px; /* 内边距 */
  box-sizing: border-box; /* 防止宽度计算错误 */
}
</style>

这些方法可以根据需求选择适合的布局方式。Flexbox和Grid布局是现代布局技术，提供更多灵活性和控制，而浮动方法则是较旧的技术，但在某些情况下仍然适用。