一个html布局问题答案

【问题标题】：a html layout problem一个html布局问题
【发布时间】：2011-07-08 22:23:29
【问题描述】：

我想做一个 html 布局，这是图像：

整个页面包含 div：

Head
left
main01
main02

还有控制div：

toogle_bar1
toogle_bar2

现在我想做如下效果：

1)head取浏览器的指定高度（例如50px），取浏览器100%的宽度。 2) 默认情况下，main02 是不可见的，所以main01 div 的高度与left 的高度相同，宽度为左侧。

3) 当toggle_bar1被点击时，left应该被隐藏/显示，一旦它不可见，main01（和main02如果main02是可见的）将占据所有宽度浏览器。

4) 当toggle_bar2被点击时，main02应该被隐藏/显示，一旦它可见，它将与main01具有相同的宽度。

5) main01 和 main02 应该具有明确的宽度和高度属性。 6) 当窗口调整大小时，滚动条无论如何都不可见。

其实我可以用javascript做，但是我想知道用纯css能不能做（当然需要js来处理点击事件）？

由于我现在使用js，当点击toggle_bar1时，我将left设置为“display:none”，然后计算clientwidth，并设置main01的宽度（或/和@987654341 @),不知道这个能不能被浏览器计算出来？

我一直认为，如果可以通过浏览器完成，我们应该避免做额外的位置计算工作。

有什么想法吗？

【问题讨论】：

我推荐使用 YUI 为你做这件事。
我们不能使用额外的js库。
你说 main01 和 main02 应该有一个明确的宽度。你的意思是百分比还是离散值？如果你想使用离散值，你用什么来填补正确的空白（如果你的值太小）。如果不应该有差距，我认为百分比值是个好主意。如果两者都可见，则将宽度设置为 45%，如果只有一个则设置为 90%...
那么显式使用js来设置元素的宽度？

标签： javascript html css

【解决方案1】：

您可以将删除 CSS 类添加到 Main Wrapper。

假设您有 MainWrapper，其中包含“Left”、“Middle”、“Right”

然后您可以在 MainWrapper 中添加或删除 CSS 类

.left-item, .right-item, .middle-item { // this are the classes in the Wrapper
some base info
}

.has-left.has-middle .left-item {
width:30%;
} 
.has-left.has-middle .middle-item {
width:70%;
}
.has-left.has-middle .right-item {
display:none;
}

你应该知道你对其他组合的影响。

不，您只是使用 js 来“添加”或“删除”您的 css 类，而 css 会为您完成。 MainWrapper 类：has-left、has-middle、has-right 删除其中一个，您的 css 就会调整。

听起来你不需要任何通用版本，所以这可以做到......

【讨论】：

【解决方案2】：

您可以在样式中尝试其中一种：

a
a:link
a:focus
a:hover
a:visited
a:active

也许……

【讨论】：