三个可变宽度，等间距DIV？四是什么？ [英] Three Variable-Width, Equally-Spaced DIVs? What About Four?

问题描述

我有一些非常简单的子导航，我想在我的网站内部区域的顶部构建，但CSS似乎没有任何简单的解决方案这样的常见问题：我想要3或4个等间距的DIV。

I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.

1）例如3可变宽度，等间距DIV

1) e.g. 3 Variable-Width, Equally-Spaced DIVs

[[LEFT]                [CENTER]               [RIGHT]]

2）eg 4可变宽度，等间距DIV

2) e.g. 4 Variable-Width, Equally-Spaced DIVs

[[LEFT]    [LEFT CENTER]    [RIGHT CENTER]    [RIGHT]]

我对于只有3个DIV的第一个问题的解决方案是浮动左右DIV，一个任意大小的中间DIV并给它margin：0 auto。这不是一个真正的解决方案，但假设没有改变导航，它给出了我想要的结果是什么的粗略近似。

My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.

我有的解决方案4个DIV的第二个问题是简单地以与之前相同的方式居中一个DIV，然后在其中浮动两个DIV，例如

The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.

[[LEFT]    [[LEFT CENTER]    [RIGHT CENTER]]    [RIGHT]]

再次，这需要将任意大小应用于中间DIV以进行对准，并且如果对站点进行任何语言或图像改变，则必须重新计算对准值。同样，它只是一个过于复杂的解决方案，需要合并结构与演示。

But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.

任何帮助都非常感谢。

Any help is greatly appreciated.

EDIT 07/20/2012 5:00 PM

table-cell解决方案使用百分比，但我遇到了另一个问题在我稍微更复杂的实现：手头的问题是每个DIV我指的是实际上是一个容器，两个更多的DIVs是图标 - 标签对，通过float或by：inline-block内联。

Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.

例如。 http://jsfiddle.net/c3yrm/1/

如您所见，列表中的最后一个元素显示不正确。

As you can see, the final element in the list is displayed improperly.

任何帮助都非常感谢！

EDIT 07/20/2012 7:16 PM

有关arttronics帮助的最终解决方案： http ：//jsfiddle.net/CuQ7r/4/

Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/

推荐答案

参考： jsFiddle纯CSS演示

解决方案是 float 单个面包屑，同时使用简单公式基于总面包屑数确定面包屑 width 的百分比。

The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.

这篇关于三个可变宽度，等间距DIV？四是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！