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

Posted 2023-03-06

【中文标题】如何仅使用 CSS 使孩子自动适应父母的宽度？

【英文标题】：How to make children auto fit parent's width only with CSS?

【发布时间】：2011-08-17 00:25:59

【问题描述】：

我有一个服务器端组件，它使用不固定宽度的DIV 生成流体布局“工具栏”，在其中生成许多A。

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

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

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

我无法更改服务器端源以生成具有固定宽度的 html。如果有任何方法，我真的很想只用 CSS 来解决它，即使用 javascript 我也可以达到这个结果。

如何使所有子级自动适应父级的宽度，而与子级的数量无关？

【问题讨论】：

我很确定这不能用 CSS 来完成，所以（如果我是对的）你必须添加一点 JavaScript。

那是我的恐惧。也许 CSS3 和 HTML5 可以做点什么……还是不行？

如果您愿意放弃对 IE7 的支持，您可以轻松地使用 CSS。 Do you care about IE7? 一个好主意是做我的神奇选择，使用 的 JavaScript 解决方法

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

@thirtydot，假设我不关心 IE7。您能否回答我如何仅使用 CSS 轻松做到这一点？

【参考方案1】：

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

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

【参考方案2】：

你可以使用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;

【讨论】：

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

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

【参考方案3】：

这已经是一个很老的问题了。尽管当时给出的答案很好，但如今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>