CSS三栏布局问题：左中右排列失效求助

嘿，我一眼就瞅出你代码里的几个关键问题啦，咱们一个个来解决：

1. ID选择器和HTML元素不匹配 #

你CSS里定义的是#myleft和#myright，但HTML里对应的div id却是left和right——这就好比你喊错了人的名字，浏览器根本找不到要应用样式的元素，自然达不到预期效果！先把ID统一起来，要么把CSS里的选择器改成#left、#right，要么把HTML里的id改成myleft、myright。

2. 中间盒子未设置浮动 #

就算ID匹配了，中间的#mycenter没有设置浮动，它会默认占据父容器的整行宽度，左右两个浮动的盒子会脱离正常文档流，导致中间盒子被挤到下方。所以必须给中间盒子也加上float: left，这样三个盒子才能在同一行排列。

修正后的完整代码（浮动方案） #

#myleft { 
  position: relative; 
  float: left; 
  width: 20%; 
  background-color: #CC6600; 
}
#mycenter { 
  float: left; /* 新增浮动属性 */
  width: 60%; 
  background-color: #f2f4f4; 
}
#myright { 
  position: relative; 
  float: right; 
  width: 20%; 
  background-color: #FF6633; 
}
/* 可选：给父容器加这个，解决浮动元素导致的高度塌陷问题 */
.container {
  overflow: hidden;
}

<div class="container">
  <div id='myleft'> Left </div>
  <div id='mycenter'> Center </div>
  <div id='myright'> right </div>
</div>

额外推荐：更简单的Flex布局方案 #

现在用浮动做三栏布局已经有点过时啦，推荐你用更现代的Flex布局，不用处理浮动的各种坑，代码更简洁：

.container {
  display: flex;
}
#myleft {
  width: 20%;
  background-color: #CC6600;
}
#mycenter {
  width: 60%; /* 或者用flex:1让它自动填充剩余空间 */
  background-color: #f2f4f4;
}
#myright {
  width: 20%;
  background-color: #FF6633;
}

HTML结构和上面一样，用.container包裹三个盒子就行，这个方案兼容性非常好，现代浏览器都支持。

内容的提问来源于stack exchange，提问作者Sumair Ali