CSS：是否可以有一个 3 列布局，左列和中列都灵活填充空间？答案

【问题标题】：CSS: Is it possible to have a 3-column layout with BOTH the left column and center column flexibly filling the space?CSS：是否可以有一个 3 列布局，左列和中列都灵活填充空间？
【发布时间】：2012-06-29 03:02:39
【问题描述】：

可以在中间列上使用position:absolute 和left 和right 来设置它相对于父div 的结束位置。

但是，我希望能够让中心 div 的左侧从左列结束的右侧开始，并且左列可以调整（基于其内容）。

这似乎是一件非常基本的事情，但据我了解，没有弹性盒就无法做到这一点。这是真的？对于语义上多余的元素和某些样式设置为auto的巧妙嵌套，我无能为力吗？

【问题讨论】：

标签： css position positioning

【解决方案1】：

如果右边的div 有一些设定的宽度（以% 或px 为单位），那么可以，你可以让左边的div 的宽度由其内容定义，同时让中心div 填写剩余空间：

#right {
  position: absolute; /* position in top right corner */
  top: 0;
  right: 0;
  width: 80px;
}
#center {
  margin-right: 80px; /* same as #right width */
}
#left {
  float: left;
}

jsFiddle DEMO

【讨论】：

如果我希望正确的 div 也可以调整，情况会如何变化？我们能否将左边的两个列放在另一个 div 中，然后浮动？
是的，但是在这一点上，您必须按照 DOM 层次结构将元素乱序放置。右边的 div 将首先出现，然后是一个包装 div，它包含左边和中心的 div。左右都会根据内容进行调整，中心 div 占据剩余空间。看这个演示：jsfiddle.net/jackwanders/JFCHw/1
这太棒了。谢谢！

【解决方案2】：

据我所知，使用简单的浮动块会更好。如果您想将所有这些绝对定位在一起，您可以将它们包装在一个绝对容器中，然后将它们浮动在里面。也许我只是不明白为什么你需要它们绝对定位，但这似乎是一个可行的选择。

【讨论】：