Question

我想制作一个900px宽的居中表，其中包含一行和两个单元格。我希望正确的单元格总是200px宽，左边的单元格应该填写其余的单元格，但是当我使浏览器窗口变小时，右边的单元格会在左边的单元格下面向下跳跃。（当两个单元格都有百分比时，它可以正常工作，但正确的单元格/块需要为200px）？

我的HTML：

<table class="sitecontent">
  <tr>
    <td class="boxed"> contents </td>
    <td class="infobar"> contents </td>
  </tr>
</table>

我的CSS：

.sitecontent {
   max-width:900px;
   margin: 0 auto;
   display: table;
   height: 100%; 
}

.boxed {
   max-width:75%;
   float: left;    
}

.infobar {   
   float: left;
   width: 200px;
   border: 1px solid rgb(240,240,240);
   overflow: auto;
   max-height: 100%;
}

最大宽度不应该是＆＃34;盒装＆＃34;的宽度。当表格宽度低于900px时，内容是否适合？

我尝试过使用div而不是表格，但结果是一样的吗？

Answer 1

如果您希望其他单元格填充其余空间，可以使用名为calc（）的函数

这允许您使用百分比和固定单位使用基本加法和减法来确定大小。

广泛支持

calc（），请参阅http://caniuse.com/#feat=calc

一个很好的参考是http://css-tricks.com/a-couple-of-use-cases-for-calc/

在以下示例中，我有

.boxed {
    max-width:calc(100% - 200px);   
}

http://jsfiddle.net/AuroraArcade/42g5mw80/2/

为了使信息栏宽200px，你必须使用盒子大小：元素上的边框，或者你可以调整内部宽度，或者你可以删除边框和间距。

一个例子

.infobar {   
   width: 200px;
   box-sizing: border-box;
   border: 1px solid rgb(240,240,240);
   overflow: auto;
   max-height: 100%;
}

并排固定大小的块和响应块？

1 个答案: