Html 使子div在父div中展开和压缩

我设置了一个页面的顶部栏，当浏览器变大或变小时，我想使每个“按钮”（

.contain

）的宽度扩大或压缩

我看到了一个非常好的解决方案，使用了一个浮动，但在我的例子中，这不起作用，因为添加浮动会导致按钮停止并排显示；我用内联块解决了一些问题

我需要一种方法来保持按钮并排，并使其宽度与浏览器窗口一起调整。有什么建议吗？我的代码如下：

#顶栏{
宽度：100%；
高度：38px；
边框底部：1px实心#e2c4ff；
位置：固定；
z指数：10；
顶部：0px；
左：0px；
文本对齐：居中；
}
.浇头{
空白：nowrap；
位置：绝对位置；
左：0%；
最高：50%；
转换：翻译（0%，-50%）；
}
.包含{
显示：内联块；
空白：正常；
左侧填充：12px；
右侧填充：12px；
高度：38px；
背景色：#fff；
右边框：1px实心#e2c4ff；
}

你好
再见
我们在干什么？
我们在干什么？
我们在干什么？
我们在干什么？
我们在干什么？
我们在干什么？
我们在干什么？
我们在干什么？
我们在干什么？
我们在干什么？
我们在干什么？
我们在干什么？
我们在干什么？

不要将

位置：绝对
用于
.toppage
。对于
.contain
使用一些百分比宽度。这应该行得通。
我决定解决这个问题：。它不像我想的那样，但是看起来非常干净，代码也比我原来拥有的更整洁。
我相信如果你给出
display:flex；证明内容：中心；宽度：100%
到
.toppage
，这将起作用。
只要容器中的内容（文本，在您的情况下）不消失，容器的收缩就很有用。您可以使用
媒体查询
创建响应容器，但其中的文本大小将保持不变。这就是为什么当页面大小减小时，容器会向下滑动，因为其中的文本具有相同的字体大小

正如我所想，这个问题可以通过两种方式解决：

1：硬编码CSS媒体查询以更改字体大小

这将需要大量的猜测工作，您必须使用许多
@media
规则来完成。仅当您不想在页面中包含
script
时才使用此选项

2：使用JavaScript处理字体大小

这是我能想到的最好的解决办法。您可以使用JS（我使用jQuery）来更改
contain
div中文本的字体大小。尽管这种方法也需要很少的硬编码。下面是示例代码：

HTML:

<div id="container">
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
</div>

$(document).ready(function() {
    $(window).resize(function() {
        var window_width = $(window).width();
        var contain_count = 10*6; // 10 contain elements * 6 characters of text 'button'
        var ratio = window_width/contain_count;
        $('.contain').css('font-size',ratio+'px')
    });
});

因此，如果你想让按钮并排排列，你也必须减小它们的字体大小。
hmm。。。这适用于扩展，但当窗口变小时，按钮会在彼此下方移动，看起来非常闪烁。压缩时，我希望按钮尽量缩小，同时仍然保持按钮并排，文本在一行上。我想我应该更清楚这一点。任何进一步的帮助（来自任何看到这一点的人）都将非常有用。代码示例或预览也将不胜感激！在这种情况下，您可以为该按钮添加最小宽度。如果有帮助，请告诉我