如何创建一个流动到某一点的列？

Question

我正在尝试创建一个双列布局，其中右列是固定的，左列灵活到一定的最大宽度，具体取决于父级的宽度。例如，在下图中，我希望右列固定为100px，左列填充父级空白区域，最多100px，此时它将停止扩展。

对于前三个示例，我可以使用带有table-layout: fixed的表，但这对最后一个示例不起作用，因为我似乎无法在第一列上设置max-width。

理想情况下，这将是仅限CSS（没有JavaScript）且不使用媒体查询（因为它基于父视图而不是视口）。

如果相关，第一列本身就是或包含一个表。

编辑：

以下是我尝试过的一些无效的代码：http://jsfiddle.net/cdp46fnx/1/

Answer 1

我不知道我是否理解您要完成的任务，但这是可能的解决方案之一（不确定它是否符合您的需求）：http://jsfiddle.net/Arministrator/0uuxvqkt/

我认为你会有一些影响你主要元素的外部因素：

<div id="site_width">
<div id="main">
  <div id="c2">2</div>
  <div id="c1">1</div>
</div>
</div>

然后调整CSS以使容器具有最小和最大宽度。向右浮动其中一列，让其他列填充剩余空间。当最小宽度为150px时，右列将为100并且为50.如果宽度超过200，则两列将为200，其余空间为空（外部元素。） 您可以更改此site_width ID以检查所有解决方案