浮点设计如何实现这种表式的结果？ [英] How can a float design achieve this table-like result?
问题描述
我通常是一个Web技术爱好者，我都是无表设计的东西，但现在，它有点生气了我。 ：/
I'm usually a Web technologies enthusiast, and I'm all for the no-tables-design thing, but right now, it's somewhat pissing me off. :/
我试图实现一些使用表格非常简单的东西，但是使用浮动元素似乎过于复杂/不可能。查看以下内容：
I'm trying to achieve something that would have been extremely easy with tables, but that seems overly complex/impossible using floating elements. Look at the following:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
+-----------------+
其中 #info 具有固定宽度，并且必须向右浮动 #contents 。 #contents 应该使用任何剩余的宽度。
Where #info has a fixed width, and must be floating right to #contents. #contents should take whatever's left of the width.
在简单的设计中， #contents 和 #info ，这并不太复杂。它们都是固定宽度的，具有 float：left 属性，非常适合。
In the simple design where both #contents and #info are present, this isn't too complex. They are both fixed-width, have the float:left property, and fit very well.
某些页面， #info 将不存在。在这种情况下，显然 #contents 不能缩放到适合所有页面。
However, on certain pages, #info won't be present. When it's the case, obviously, #contents doesn't scale to fit all the page.
解决方案是给予 #contents 没有固定宽度，因此它会扩展，并将 #info 更改为 float：right 。通过其他所需的更改，它没有完全所需的行为，因为它破坏了柱状布局，当 #contents 高于 #info ：
The most obvious solution was to give #contents no fixed width so it'd scale, and change #info to be float:right. Past the minor other changes it required, it didn't have exactly the desired behavior, since it breaks the column-like layout when #contents is taller than #info:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
| +---------+
| |
+---------------------------+
更糟糕的是，在 #contents 中还有其他< div> s与 border-bottom 属性集，并且边框也以下列方式传递到 #info ：
Even worse, inside #contents, there are other <div>s with the border-bottom property set, and the border passes right through #info too in the following fashion:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------|-|-------|
| | +-------+
| +---------+
| |
+---------------------------+
所以，考虑到这一切，我如何给 #info 一个固定的宽度， #contents ，但保留列式设计，并且 #contents 占用整个屏幕 #info 不存在，所有这一切确保没有视觉工件，并且不诉诸多个样式表？
So, considering all this, how can I give #info a fixed width, have it float to the right of #contents, but keep the column-like design and have #contents occupy the whole screen when #info isn't there, all of this making sure there are no visual artifacts, and without resorting to more than one stylesheet?
这是在 #contents 和 #info 存在的页面上的所需结果：
This would be the desired result on a page where both #contents and #info are present:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------| | |
| | +-------+
|-----------------|
| |
+-----------------+
这是在只有 #contents 的页面上的所需结果：
And this is the desired result on a page where only #contents is present:
+---------------------------+
| #contents |
|---------------------------|
| |
|---------------------------|
| |
+---------------------------+
我希望这不会太混乱。
I hope this wasn't too confusing. I'm out of brain power.
推荐答案
我给我的网络老师发送了电子邮件，答案很简单。它不适用于Internet Explorer（至少版本6），但它对我的情况很好。
I emailed my web teacher about it, and the answer is quite simple. It doesn't work with Internet Explorer (at least version 6), but it degrades nicely for my case.
使用 #info 设置为 float：right ，只需要设置 #contents c> overflow：hidden 。 &voilà。
With #info set to float:right, it suffices to have #contents set with the property overflow:hidden. And voilà.
这篇关于浮点设计如何实现这种表式的结果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
