M. *_*old 6 html css css3 css-float
我有一些非常简单的子导航,我试图在我网站的内容区域顶部构建,但CSS似乎没有任何简单的解决方案来解决这样一个常见问题:我想要3或4页面顶部等距离的DIV.
1)例如3个可变宽度,等间隔DIV
[[LEFT] [CENTER] [RIGHT]]
2)例如4个可变宽度,等间隔DIV
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
我只有3个DIV的第一个问题的解决方案是浮动左右DIV,然后为中间DIV分配任意大小并给它"margin:0 auto".这不是一个真正的解决方案,但假设导航没有变化,它给出了我想要的结果的粗略近似值.
我对4 DIV的第二个问题的解决方案是简单地以与以前相同的方式将DIV居中,但是然后在其中浮动两个DIV,例如
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
但同样,这需要在中间DIV上应用任意大小进行对齐,如果对站点进行任何语言或图像更改,则必须重新计算对齐值.同样,它只是一个过于复杂的解决方案,需要将结构与表示合并.
任何帮助是极大的赞赏.
编辑07/20/2012下午5:00
好吧,我使用百分比将"table-cell"解决方案放到位,但是我在稍微复杂的实现中遇到了另一个问题:手头的问题是我所指的每个DIV实际上是另外两个DIV的容器.图标 - 标签对,通过浮点或显示内联:内联块.
例如http://jsfiddle.net/c3yrm/1/
如您所见,列表中的最后一个元素显示不正确.
任何帮助再次非常感谢!
编辑07/20/2012 7:16 PM
艺术家帮助的最终解决方案:http://jsfiddle.net/CuQ7r/4/