Html 如何仅使用 CSS 使孩子自动适应父母的宽度?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5858108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make children auto fit parent's width only with CSS?
提问by Erick Petrucelli
I have a server-side component that generates a fluid layout "toolbar" using DIV
without fixed width, generating many A
inside it.
我有一个服务器端组件,它使用DIV
没有固定宽度的方式生成一个流畅的布局“工具栏” ,A
在其中生成许多。
Then I need customize that layout to make all A
tags auto fit to the parent width. But the number of children is variable and the parent's width isn't known (it auto fits itself to the window).
然后我需要自定义该布局以使所有A
标签自动适应父宽度。但是孩子的数量是可变的,父母的宽度是未知的(它自动适应窗口)。
I made some tests with this Fiddle: http://jsfiddle.net/ErickPetru/6nSEj/1/
我用这个小提琴做了一些测试:http: //jsfiddle.net/ErickPetru/6nSEj/1/
But I can't find a way to make it dynamic (uncomment the last A
tag to see how it ins't working, lol).
但我找不到让它动态的方法(取消最后一个A
标签的注释,看看它是如何不起作用的,哈哈)。
I can't change the server-side sources to gerenate HTML with fixed width. And I really would like to solve it only with CSS if there is any way, even that with JavaScript I could achieve that result.
我无法更改服务器端源以生成具有固定宽度的 HTML。如果有任何办法,我真的很想只用 CSS 来解决它,即使是用 JavaScript 也能达到那个结果。
How can I make all the children auto-fit itself to the parent's width independently of the number of children?
如何让所有孩子自动适应父母的宽度而与孩子的数量无关?
采纳答案by Erick Petrucelli
This is already a pretty old question. Although the answers given attended well at the time, nowadays the Flexible Box Layoutoffers the same result with much more simplicity, with good supportin all modern browsers. I strongly recommend it!
这已经是一个很老的问题了。尽管当时给出的答案很受欢迎,但现在灵活框布局提供了相同的结果,而且更加简单,并且在所有现代浏览器中都得到了良好的支持。我强烈推荐它!
/* 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>
回答by thirtydot
You can use display: table-cell
:
您可以使用display: table-cell
:
See:http://jsfiddle.net/6nSEj/12/(or with 5 children)
请参阅:http : //jsfiddle.net/6nSEj/12/ (或有 5 个孩子)
This won't work in IE7 because that browser simply doesn't support display: table
and friends.
这在 IE7 中不起作用,因为该浏览器根本不支持display: table
和朋友。
div.parent {
..
width: 100%;
display: table;
table-layout: fixed;
}
div.parent a {
..
display: table-cell;
}
回答by Piotr Kula
For now many use jQuery as a solution to this problem. All you need is one line. This is from your fiddle.
现在很多人使用 jQuery 作为这个问题的解决方案。您只需要一条线。这是来自你的小提琴。
$("div.parent a").css("width", (($("div.parent").width() / $("div.parent a").length ) -2) + "px");