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

我有一个服务器端组件，使用生成流体布局“工具栏” DIV 没有固定宽度，产生很多 A 在里面。

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

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

但我找不到让它变得动态的方法（取消注释最后一个 A 标记，看看它是如何工作的，哈哈）。

我无法更改服务器端源以使用固定宽度格式化HTML。如果有任何办法，我真的想用CSS解决它，即使用JavaScript我也可以实现这个结果。

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

12630

2018-05-02 14:02

起源

我很确定这不能用CSS严格完成，所以（如果我是对的）你必须加入一些JavaScript。 - Matt Ball

那是我的恐惧。也许CSS3和HTML5可以做点什么......或者不是吗？ - Erick Petrucelli

如果你愿意放弃对IE7的支持，你可以轻松地使用CSS。你关心IE7吗？一个好主意是做我的神奇选项，使用<= IE7的JavaScript解决方法 - thirtydot

@ErickPetru：见 meta.stackexchange.com/questions/43019/... - 我只是在这里因为我碰巧回头看这个问题。 - thirtydot

@thirtydot，supose我不关心IE7。您能否回答一下如何只使用CSS轻松完成？ - Erick Petrucelli

答案:

您可以使用 display: table-cell：

看到： http://jsfiddle.net/6nSEj/12/ （或有5个孩子）

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

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

2018-05-02 21:39

现在IE7的市场份额不到4％（至少在我的国家），我相信它是最好的选择，因为它只用CSS解决了问题。 - Erick Petrucelli

@thirtydot Dude，这是一个史诗般的解决方案！在许多情况下非常有用。谢谢！ - Mahdi

这已经是一个非常古老的问题了。虽然当时给出的答案很好，但现在灵活的盒子布局提供相同的结果，更简单，有良好的支持在所有现代浏览器中。我强烈推荐它！

/* 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>

2017-09-23 12:30

现在很多人使用jQuery作为解决这个问题的方法。你只需要一条线。这是你的小提琴。

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

2018-05-02 14:45

这不适用于重新调整大小。 - Marcel

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

答案:

热门问题

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