html – 仅使用CSS设置父宽度等于子总宽度？

我不知道有多少.child元素.parent会包含但我知道它们各自的宽度.

我想将.parent的宽度设置为等于(每个.child的宽度)*(.child的总数)

我不想使用浮动和宽度：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,为子级使用inline-table.一切都充满活力.我通过添加另一个祖父母与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>

html – 仅使用CSS设置父宽度等于子总宽度？

解决方法

猜你在找的HTML相关文章