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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这是CSS的常见问题，但是有一些JavaScript解决方案可以解决这个问题，例如：https://github.com/liabru/jquery-match-height

Answer 3

为每个div添加vertical-align: top;为我解决了问题。 http://jsfiddle.net/bhw44w7q/1/

Answer 4

您可以尝试使用css float属性：JsFiddle

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

CSS三列固定宽度和相同高度

4 个答案: