浮动设计如何实现这种类似于表的结果?

我通常是一个网络技术爱好者,我完全赞成无表设计,但现在,它有点让我生气。:

我正试图实现一些本来对表非常简单的功能,但是使用浮动元素似乎过于复杂/不可能。请看以下内容:

+-----------------+ +-------+
|                 | |       |
|    #contents    | | #info |
|                 | |       |
|                 | +-------+
+-----------------+

在哪里? #info 具有固定宽度,并且必须浮动到 #contents 。 α含量 应该拿走宽度剩下的东西。

在简单的设计中 α含量 和 信息公开 是的,这并不复杂。它们都是固定宽度的 float:left 财产,非常合身。

然而,在某些页面上, 信息公开 不会出现的。显然,如果是这样, α含量 无法缩放以适应所有页面。

最明显的解决办法是 α含量 没有固定的宽度,所以它会缩放,并改变 信息公开 成为 float:right . 经过它所需的其他小的更改之后,它没有完全达到所需的行为,因为它在 α含量 比 信息公开 :

+-----------------+ +-------+
|                 | |       |
|    #contents    | | #info |
|                 | |       |
|                 | +-------+
|                 +---------+
|                           |
+---------------------------+

更糟的是,在里面 α含量 ,还有其他 <div> S与 border-bottom 属性集,边界将直接通过 信息公开 以以下方式:

+-----------------+ +-------+
|                 | |       |
|    #contents    | | #info |
|-----------------|-|-------|
|                 | +-------+
|                 +---------+
|                           |
+---------------------------+

所以,考虑到这些,我怎么能 信息公开 一个固定的宽度,让它浮动到 α含量 ,但保持柱状设计 α含量 当 信息公开 不是吗,所有这些都确保没有视觉工件,并且不诉诸于多个样式表?

这是一个理想的结果 α含量 和 信息公开 出席者:

+-----------------+ +-------+
|                 | |       |
|    #contents    | | #info |
|-----------------| |       |
|                 | +-------+
|-----------------|
|                 |
+-----------------+

这是在一个只有 α含量 目前存在:

+---------------------------+
|         #contents         |
|---------------------------|
|                           |
|---------------------------|
|                           |
+---------------------------+

我希望这不会太混乱。我没有脑力了。