Question

我有一些非常简单的子导航，我正在尝试在我的网站内部区域的顶部构建，但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 PM

好吧，我使用百分比将“table-cell”解决方案放到位，但是我在稍微复杂的实现中遇到了另一个问题：手头的问题是我指的每个DIV实际上是另外两个DIV的容器DIV是图标标签对，通过浮动或显示内联：内联块。

e.g。 http://jsfiddle.net/c3yrm/1/

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

再次非常感谢任何帮助！

编辑07/20/2012 7:16 PM

艺术家帮助的最终解决方案：http://jsfiddle.net/CuQ7r/4/

Answer 1

参考：jsFiddle Pure CSS Demo

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

Answer 2

你可以使用百分比，然后它归结为简单的数学：

[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px

然后，您可以为其容器指定宽度并使用

display:inline;

让它们保持内联。

注意：如果您使用边框来查看div正在执行哪些操作会增加无法计算的空间，因此您需要将元素宽度减少1％左右或者只需更改其背景颜色。

Answer 3

ol {
    width: 400px;
    /*width: 800px;*/

    display: table;
    table-layout: fixed; /* the magic dust that ensure equal width */
    background: #ccc
}
ol > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}

就像这里：http://jsfiddle.net/QzYAr/

Answer 4

我发现这样做的一种方法是使用柔性盒（或内联柔性）。

Here是一个很好的解释和示例，说明如何做到这一点。

我认为将来，flex box将是处理此类事情的最佳方式，但是在其他浏览器采用Mozilla思考如何使用flex-basis属性的思维方式之前（最小化） - 内容，最大内容，适合内容等作为值），这些弹性框将继续成为响应式设计的问题。例如，当窗口被压扁时，内部内容（a_really_really_long_word）偶尔会无法适应分配的空间，因此，如果您不在屏幕右侧，有时可能无法看到某些内容。小心。

我想也许如果你使用flex-wrap属性，你或许可以确保一切都适合。 Here是另一个如何完成此操作的示例（无论如何都在Mozilla浏览器中）。

我倾向于使用柔性盒子来制作宽度相当固定（不太小）的信头或桌子，因为它们通常可以很好地隔开;我倾向于使用嵌套的浮点数和内联块对象用于内容必须非常小的网站（如此处的其他一些答案所示）。

三个可变宽度，等间距DIV？四个怎么样？

4 个答案: