html - 拆分表格单元以添加更多列和行

Question

我正在尝试构建此布局：

我这个时候有这个：http: //jsfiddle.net/Gh6mB/12/

问题是 div #detalhes 并没有占用水平方向的所有可用空间。此 div 必须分为左侧（用于图像）和右侧，以显示其他信息。我已经将 div 的 stype 更改为 table-cell、table-row 和 table 但它不起作用。您可以在全屏结果中看到这一点：http: //jsfiddle.net/Gh6mB/12/embedded/result/

Answer 1

得到它的工作http://jsfiddle.net/Gh6mB/21/

将此添加到您的 div #detalhes

display:block; float:left; width:100%;

并删除了这个

position:relative;

Answer 2

当您使用 div 和浮动时，您还必须考虑调整页面大小来移动东西，另一种选择....

简单的解决方案，使用表格。

<table width="100%"><tr><td width="90%" colspan="2"></td><td width="10%"></tr><tr><td width="10%"></td><td width="80%"></td><td width="10%"></tr></table>

colspan 将占据第一列的 2 行，将 css 用于图像等