Question

我即将建立一个这样的网格：

                       <- 100px ->
       +---------------+---------+ -
       | contentbox    | Right   | |
     - +---------------+     box | | 80 %
25px | | bottombox     |         | |
     - +---------------+---------+ -
       <--------- 80 % ---------->

我目前的问题是建立这种灵活性。该框本身的大小为用户浏览器窗口宽度的80％。 Contentbox应该能够相应地调整自己，所有其他框都有一定的固定大小。

我怎样才能做到这一点？

我尝试用表格这样做：

<table width="80%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>content content content content content content content content content content content content content content content content content content</td>
    <td width="200" rowspan="2">rightbox<br />
    rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox</td>
  </tr>
  <tr>
    <td height="25">bottombox</td>
  </tr>
</table>

但似乎无论我做什么，底盒总是会达到右侧箱子高度的一半。

但我更喜欢用div来做。

Answer 1

为contentBox和bottombox提供100px的右边距。然后在右侧框中使用float，使其填充此边距所在的空间。这将处理另一个容器内的布局，该容器负责80％宽度（足够容易）和80％高度（稍微复杂一些）。

Answer 2

以下是您需要的内容：http://jsfiddle.net/kizu/zLGez/

如果您需要相同的列或有其他要求 - 更新您的问题，我会更新我的答案：）

构建适用于不同屏幕大小的动态表/ div网格

2 个答案: