Html 仅使用 CSS 将父宽度设置为等于子总宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27382777/
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
Set Parent Width equal to Children Total Width using only CSS?
提问by Sprout Coder
I don't know how many .childelements .parentwill contain but I know their individual width.
我不知道将包含多少个.child元素，.parent但我知道它们各自的宽度。
I want to set the width of .parentto be equal to (width of each .child) *(total number of .child)
我想将的宽度设置.parent为等于（每个的宽度.child）*（总数.child）
I don't want to use floatsand width: auto;
我不想使用floats和width: auto;
Can I do something with calc()without using Javascript ?
我可以在calc()不使用 Javascript 的情况下做些什么吗？
**CSS : **
**CSS：**
.parent {
height: 100%;
width: calc({number of children} * {width of each child = 100px});
}
.child {
height: 100px;
width: 100px;
}
HTML :
HTML :
<div class="parent">
<div class="child">
<div class="child">
<div class="child">
</div>
回答by sooon
I know this is a bit late, but Hope this will help somebody who is looking for similar solution:
我知道这有点晚了，但希望这会对正在寻找类似解决方案的人有所帮助：
<div class="parent" style="display: inline-flex">
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
</div>
the trick is to use inline-flexfor the parentand inline-tablefor the child. Everything is dynamic. I make the table scrollable horizontally by adding another grandparentwith overflow-x:scroll;:
诀窍是使用inline-flexforparent和inline-tablefor child。一切都是动态的。我把表滚动水平通过添加另一个grandparent具有overflow-x:scroll;：
<div class="grandparent" style="width: 300px; overflow-x: scroll; background: gray">
<div class="parent" style="display: inline-flex">
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
<div class="child" style="display: inline-table">some button</div>
</div>
</div>
回答by Paulie_D
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.parent {
height: 100%;
display:inline-block;
background:#bada55;
font-size:0; /* clear whitespace*/
}
.child {
height: 100px;
width: 100px;
border:1px solid red;
display:inline-block;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>回答by Pranav
If you're on Chrome, you can use max-width: fit-content
如果您使用的是 Chrome，则可以使用 max-width: fit-content
It's not yet supportedby other major browsers though.
回答by Manjunatha N
.parent{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.child {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
