如何将此基于表格的布局转换为使用基于CSS布局的语义html？

在上图中，大部分的html都是语义的，使用css来管理它的全部外观。尽管我尽了最大的努力，但是我不得不求助于使用桌子来让右侧的部分保持在原来的位置，并在屏幕变得太大时允许其内部元素流畅地包裹，如下所示：

我知道如果表格只用于“表格数据”，但我从来没有找到一种强制元素不使用表格的好方法。有人解决了这个问题吗？

什么是您正在解决的_exact_问题？允许文本换行发生在div容器中？这听起来不是什么大问题，因为它应该默认发生。 – 2010-10-01 21:21:52

如果我使用div来保持左侧的“选择布局”区域和右侧的按钮和制表符，那么只要按钮或制表符超过浏览器宽度，右侧的整个面板就会在布局列表下向下流动。我希望它保持在右侧，并使按钮列表（例如）开始换行。 – StriplingWarrior 2010-10-01 22:40:48

您应该可以设置它的宽度。如果没有看到你正在做这件事的确切方式，这很难做到，因为CSS取决于父代的大小等。

我也会查看CSS属性最小宽度。

2010-10-01 21:24:29 beta0x64

我希望右侧的面板宽度（使用布局选项卡和按钮）自行调整，以便在左侧的布局按钮列表占用所需的空间之后占用剩下的任何空间。 – StriplingWarrior 2010-10-01 22:36:11

你试过使用列表项？通常，在创建菜单元素时，最好使用UL-> LI而不是span或div

2010-10-01 21:25:29 FatherStorm

按钮和选项卡列表使用列表项目。这里唯一的表格有两个单元格：一个用于保存左侧的布局列表，另一个用于保存右侧的按钮和制表符列表。 – StriplingWarrior 2010-10-01 22:37:38

回答