html - CSS 固定宽度和相同高度的三列

Question

我正在尝试创建一个包含 3 列的容器。每列都有我指定的固定宽度。每列必须跨越容器的整个高度。

我遇到的问题是列会根据列的内容上下移动。检查http://jsfiddle.net/bhw44w7q/明白我的意思。解决此问题的最佳方法是什么？

<div id="container">
    <div id="left">left left left left left</div>
    <div id="middle">middle middle middle middle middle</div>    
    <div id="right">right right right right right</div>
</div>

#container {
    height: 500px;
    width: 750px;
    background-color: black;
    display: inline-block;
}
#left {
    background-color: #fcc;
    display: inline-block;
    height: 100%;
    width: 50px;
}
#middle {
    background-color: #cfc;
    display: inline-block;
    height: 100%;
    width: 100px;
}
#right {
    background-color: #ccf;
    display: inline-block;
    height: 100%;
    width: 590px;
}

Answer 1

vertical-align(适用于内联级和table-cell 元素)的默认值是baseline(baseline 前一个元素)，这就是您遇到这种情况的原因。

您可以使用 vertical-align: top 和 display: inline-block 来防止这种情况。

Updated Fiddle

#container {
  height: 500px;
  width: 750px;
  background-color: black;
}
#left {
  background-color: #fcc;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 50px;
}
#middle {
  background-color: #cfc;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 100px;
}
#right {
  background-color: #ccf;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 590px;
}

<div id="container">
  <div id="left">left left left left left</div>
  <div id="middle">middle middle middle middle middle</div>
  <div id="right">right right right right right</div>
</div>