如何让孩子只用CSS自动适应父母的宽度？

我有一个服务器端组件，使用DIV生成一个流体布局“工具栏”，没有固定的宽度，在它内部生成了很多A。如何让孩子只用CSS自动适应父母的宽度？

然后，我需要自定义该布局以使所有A标签自动适合父级宽度。但是，孩子的数量是可变的，父母的宽度是不知道的（它自动适应窗口）。

我做了一些测试，这个小提琴：http://jsfiddle.net/ErickPetru/6nSEj/1/

但我不能找到一种方法，使其动态（取消注释最后A标签来看看它是如何工作的ins't，大声笑）。

我无法更改服务器端源以固定宽度格式化HTML。我真的想用CSS解决它，如果有什么办法的话，甚至可以用JavaScript来实现这个结果。

我该如何让所有孩子自动适应父母的宽度而不受孩子数量的影响？

来源

2011-05-02 Erick Petrucelli

我敢肯定，这不能用CSS严格完成，所以（如果我是正确的），你有一点JavaScript来洒。 – 2011-05-02 14:04:12

这是我的恐惧。也许CSS3和HTML5可以做些什么...或不？ – 2011-05-02 14:11:24

如果您愿意放弃对IE7的支持，您可以轻松使用CSS来完成。 [你关心IE7吗？]（http://gs.statcounter.com/#browser_version-ww-monthly-201004-201104）一个好主意是做我的神奇选择，用JavaScript解决方法<= IE7 – thirtydot 2011-05-02 16:40:30

这已经是一个相当古老的问题。虽然当时给出的答案很好，但现在Flexible Box Layout提供了相同的结果，更简单，good support在所有的现代浏览器。我强烈推荐它！

/* Important parts */ 
 
.parent { 
 
    display: flex; 
 
} 
 

 
.parent a { 
 
    flex: 1; 
 
} 
 

 
/* Decoration */ 
 
.parent { 
 
    padding: 8px; 
 
    border: 1px solid #ccc; 
 
    background: #ededed; 
 
} 
 

 
.parent a { 
 
    line-height: 26px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    border: 1px solid #ccc; 
 
    background: #dbdbdb; 
 
    color: #111; 
 
}

<div class="parent"> 
 
    <a href="#">Some</a> 
 
    <a href="#">Other</a> 
 
    <a href="#">Any</a> 
 
</div> 
 

 
<br> 
 

 
<div class="parent"> 
 
    <a href="#">Some</a> 
 
    <a href="#">Other</a> 
 
    <a href="#">Any</a> 
 
    <a href="#">One More</a> 
 
    <a href="#">Last</a> 
 
</div>

来源

2016-09-23 12:30:33

现在很多人都用jQuery来解决这个问题。所有你需要的是一条线。这是你的小提琴。

$("div.parent a").css("width", (($("div.parent").width()/$("div.parent a").length) -2) + "px");

来源

2011-05-02 14:45:06 ppumkin

这对于重新调整尺寸不太合适。 – Marcel 2014-09-03 00:56:44

您可以使用display: table-cell：

参见：http://jsfiddle.net/6nSEj/12/（or with 5 children）

这不会在IE7中工作，因为该浏览器根本不支持display: table和朋友。

div.parent { 
    .. 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
} 
div.parent a { 
    .. 
    display: table-cell; 
}

来源

2011-05-02 21:39:24 thirtydot

现在IE7的市场份额不足4％（至少在我的国家是这样），我相信这是最好的选择，因为它只能用CSS解决问题。 – 2012-09-27 14:25:00

@thirtydot Dude，这是一个史诗般的解决方案！在许多情况下非常有用。谢谢！ – Mahdi 2015-03-18 07:21:25

如何让孩子只用CSS自动适应父母的宽度？

回答

相关问题