中心内容基于它的孩子的最大宽度?

时间:2018-05-02 20:53:38

标签: css css3 responsive-design flexbox

我不确定这可能与CSS有关,但我想仔细检查。我有一个响应表,可以有3到10列。列分为三个部分。左边的列宽30%,最大宽度500px,最小宽度190px。

中间容器是大多数列所在的位置。它可以有1-8列。容器的宽度为60%。该容器内的每列都有一个宽度除以该容器中的列数。例如如果有三列,则每列的宽度为33.33%。这些列的最小宽度为100px,最大宽度为250px。

最后一列的宽度为10%,中间100px和250px的列的最小宽度和最大宽度相同。

我希望表格能够根据子元素的最大宽度进行拉伸。因此,例如,如果窗口的宽度扩展到2560px并且有5列,则表格的宽度将为1500px(500 + 250 * 4)。同样,如果有9列,则表格将为2500px(500 + 250 * 8)。

当然,如果窗口小于每列会缩小,直到它达到最小宽度。有没有办法用CSS做到这一点?

0 个答案:

没有答案