html设置css浮点,基于宽度的HTML/CSS块浮点数变化

我有几个网页以大多数类似的方式显示数据。基于宽度的HTML/CSS块浮点数变化

变化＃1：页面左上角有一个小的“图例”表，右上角有一个饼图，然后是直接位于图例表下方的数据表，在同一个可视左栏这一页。

变化＃2：与＃1相同除了数据表非常宽并且需要整个页面宽度，因此需要在饼图下方(而不是在左侧)。

是否可以创建一个HTML模板和CSS可供变体使用？

到目前为止，我曾尝试以下HTML：

Key	Value
One	Woof
Two	August

Foo Column	Bar	Bazola

和CSS：

.filters {

border: 1px solid grey;

float: left;

}

.graph {

Xfloat:right;

}

#data1 {

width: 100%;

border: 1px solid grey;

float: left;

}

我有一个的jsfiddle这里我想工作了这一点(为简单起见，他们都是在同一页上，但不会在真实情况下)在http://jsfiddle.net/LF978/

目前，它不起作用。我的真实案例有单独的页面可以工作，但会产生很多重复的代码，我很想删除它们。

2013-07-08

CXJ

+0

你说多页正确。给你的页面ID和调整。 ＃page1＃data1 {width：50％}＃page2＃data1 {width：80％} –