html - float 设计如何实现这种类似表格的结果？

Question

我通常是网络技术爱好者，我完全赞成无表格设计，但现在，这让我有些恼火。 :/

我正在尝试实现一些使用表格非常容易的东西，但使用 float 元素似乎过于复杂/不可能。请看以下内容:

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

在哪里#info具有固定宽度，并且必须向右浮动到 #contents . #contents应采用宽度的剩余部分。

在简单的设计中#contents和 #info存在，这并不太复杂。它们都是固定宽度的，有 float:left属性，非常适合。

但是，在某些页面上，#info不会出现。如果是这种情况，显然，#contents不会缩放以适合所有页面。

最明显的解决方案是给出 #contents没有固定宽度，所以它会缩放，然后更改 #info成为float:right .除了所需的其他小改动之外，它并没有完全符合预期的行为，因为它在 #contents 时破坏了类似列的布局。高于#info :

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

更糟的是，里面#contents , 还有其他 <div> s 与 border-bottom属性设置，边框正好穿过 #info也采用以下方式:

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

所以，考虑到这一切，我怎么能给 #info固定宽度，让它 float 到 #contents 的右边, 但保留柱状设计并有 #contents #info时占据整个屏幕不是吗，所有这些都确保没有视觉伪影，并且不求助于多个样式表？

这将是同时包含 #contents 的页面上的预期结果和 #info存在:

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

这是页面上的预期结果，其中只有 #contents存在:

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

我希望这不会太困惑。我没脑力了。

Answer 1

也 float 您的#content div，它会阻止它像您一样泄漏，并且当#info 消失时它会填满整个页面。如果你没有#info，你可以以某种方式更改#content，#content 可以有一个相对位置和一些右填充，在#info 中有一个绝对位置来填充它的位置。