6

我有一些非常简单的子导航，我试图在我的网站内容区域的顶部构建，但 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 应用任意大小以进行对齐，并且如果对站点进行任何语言或图像更改，则必须重新计算对齐值。同样，它只是一个过于复杂的解决方案，需要将结构与表示合并。

任何帮助是极大的赞赏。

编辑 2012 年 7 月 20 日下午 5:00

好吧，我使用百分比将“表格单元”解决方案放置到位，但在我稍微复杂的实现中遇到了另一个问题：手头的问题是我所指的每个 DIV 实际上是另外两个 DIV 的容器，它们是图标标签对，通过浮点数或通过 display:inline-block 内联。

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

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

再次非常感谢任何帮助！

编辑 2012 年 7 月 20 日晚上 7:16

在 arttronics 帮助下的最终解决方案：http: //jsfiddle.net/CuQ7r/4/

4

4 回答 4

3

参考：jsFiddle 纯 CSS 演示

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

于 2012-07-21T02:01:41.427 回答
1

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

[[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% 左右，或者只需更改它们的背景颜色。

于 2012-07-20T21:08:27.283 回答
0 
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/

于 2012-07-20T20:58:15.630 回答
0

我发现的一种方法是使用弹性框（或内联弹性）。

这是一个很好的解释和如何完成的示例。

我认为在未来，flex box 将是处理这类事情的最佳方式，但直到其他浏览器赶上 Mozilla 关于如何使用 flex-basis 属性的思考方式（使用 min-content、max-content、 fit-content 等作为值），这些弹性框将继续成为响应式设计的问题。例如，有时当窗口被压扁时，内部内容 (a_really_really_long_word) 无法放入分配的空间，因此如果您不小心，有时屏幕右侧可能看不到某些内容。

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

我倾向于将弹性框用于宽度相当固定（不太小）的信头或表格，因为它们通常很好地间隔开；对于内容必须压缩得非常小的网站，我倾向于使用嵌套的浮动和内联块对象（如此处其他一些答案中所建议的那样）。

于 2016-04-08T18:08:18.527 回答