我不知道有多少.child
元素.parent
将包含,但我知道他们的个人宽度。
我想将.parent
的宽度设置为等于(每个.child
的宽度)*(.child
的总数)
我不想使用floats
和width: auto;
我可以在不使用Javascript的情况下使用calc()
做些什么吗?
** CSS:**
.parent {
height: 100%;
width: calc({number of children} * {width of each child = 100px});
}
.child {
height: 100px;
width: 100px;
}
HTML:
<div class="parent">
<div class="child">
<div class="child">
<div class="child">
</div>
我知道这有点晚了,但希望这会帮助那些正在寻找类似解决方案的人:
<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>
诀窍是使用inline-flex
为parent
和inline-table
为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>
* {
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>
如果您使用的是Chrome,则可以使用max-width: fit-content
这是其他主流浏览器的not yet supported。
.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>