Html 在本例中，创建CSS最优雅的方法是什么？

我正在尝试为这个示例创建CSS：

我现在遇到的问题是第1行，当浏览器调整大小时，col3不能保持不变

我不太关心配色方案，它只是创建CSS的最有效的跨浏览器方式

我曾考虑使用表，但想先使用CSS和DIV来实现这一点

以下是我目前拥有的一个样本：

html{height:100%；}
身体{
字体大小：.85em；
字体系列：“Segoe UI”、Verdana、Helvetica、无衬线；
颜色：#232323；
身高：100%；
/*背景色：#fff*/
背景：红色；/*用于不支持渐变的浏览器*/
背景：-webkit线性梯度（#782be0，#451883）；/*用于Safari 5.1到6.0*/
背景：-o-线性梯度（#782be0，#451883）；/*用于歌剧11.1至12.0*/
背景：-Firefox 3.6到15版本的moz线性渐变（#782be0，#451883）；/**/
背景：线性渐变（#782be0，#451883）；/*标准语法*/
}
页眉、页脚、导航、剖面{
显示：块；
}
/*列的样式
-----------------------------------------------------------*/
.col-1{
宽度：100px；
高度：100px；
背景：-Opera11.1至12.0的o型线性梯度（#f30c48，#850b2b）；/**/
背景：线性渐变（#f30c48，#850b2b）；/*标准语法*/
}
.col-2{
宽度：100px；
高度：100px；
背景：-Opera11.1至12.0的o型线性梯度（#f30c48，#850b2b）；/**/
背景：线性渐变（#3e3e，#030303）；/*标准语法*/
}
col-3{
宽度：150px；
高度：20px；
背景：-Opera11.1至12.0的o型线性梯度（#f30c48，#850b2b）；/**/
背景：线性渐变（#3e3e，#030303）；/*标准语法*/
}
col-4{
宽度：100px；
高度：100px；
背景：-Opera11.1至12.0的o型线性梯度（#f30c48，#850b2b）；/**/
背景：线性渐变（#3e3e，#030303）；/*标准语法*/
}
col-5{
宽度：100px；
高度：100px；
背景：-Opera11.1至12.0的o型线性梯度（#f30c48，#850b2b）；/**/
背景：线性渐变（#3e3e，#030303）；/*标准语法*/
}
[类别*=“列-”]{
浮动：左；
填充：25px；
左边距：50像素；
边缘顶部：25px；
}
/*基本表单的样式
-----------------------------------------------------------*/
div{
文本对齐：居中；
}
标签{
颜色：白色；
字号：225px；
高度：100px；
线高：180px；
}
拉贝隆先生{
颜色：白色；
字体大小：16px；
高度：12px；
线高：16px；
}
拉贝尔托先生{
颜色：白色；
字体大小：16px；
高度：16px；
线高：16px；
文本对齐：左对齐；
}
拉贝尔特里先生{
颜色：白色；
字体大小：16px；
高度：12px；
线高：16px；
}
拉贝尔福先生{
颜色：白色；
字体大小：16px；
高度：12px；
线高：16px；
}
.小标签{
显示：内联块；
垂直对齐：中间对齐；
颜色：白色；
浮动：对；
字体大小：60px；
高度：12px；
线高：12px；
}
斯莫拉贝尔托先生{
显示：内联块；
颜色：白色；
字体大小：36px；
高度：36px；
线高：36px；
}

呼叫等待

可用

午休时间
0
会议培训
0
无法使用的
0
入境

出境

这个问题要么过于宽泛，基于观点，要么需要讨论，因此对于堆栈溢出来说是离题的。如果您有一个具体的、可回答的编程问题，请提供完整的详细信息。但是，在我看来，它像是表格数据。我在这里使用表格没有问题。

label

用于标记表单字段，如输入、选择或文本区域（标签上有for属性，表单字段上有id，两者的值相同）从而向用户解释他应该键入、检查或选择什么（姓名、国家、是/否等）。在这里它不能；每个彩色方块都可以使用一个简单的段落（或者将一个段落放入一个div中，这更符合“布局要求”）