相关疑难解决方法(0)

我想要完成的是有一个固定宽度的第一个div和一个流动的第二个div,它将填充父div宽度的剩余宽度.

<div class='clearfix'>
  <div style='float:left; width:100px;'>some content</div>
  <div style='float:left'>some more content</div>
</div>

在这一点上,一切似乎都很好,流畅.

<div style='display:table'>
  <div style='display:table-cell; width:100px;'>some content</div>
  <div style='display:table-cell'>some more content</div>
</div>

我想继续第二个,但我觉得第二个例子将来会给我带来麻烦.

你能提供一些建议或见解吗？

我想知道是否可以在CSS中执行此操作,而无需使用javascript:

N个<li>项目的列表,显示内联,相等宽度,以及所有宽度等于容器的宽度

我可以有3个<li>项目,在这种情况下<li>宽度将是33%,或者我可以有4个<li>项目,那么li宽度将是25%.

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