Html 自动调整图元的宽度

最近，我被分配了使用HTML和 CSS此组件是表单的一部分，由以下部分组成：

• 左侧的元素，可以是标签、跨度或类似的内容
• 右边通常是按钮的项目
• 在上述元件之间将设置一个中心元件，该中心元件具有自我调节其他元件之间剩余空间的行为

我想做到这一点：

我找不到满足上述所有标准的解决方案，最后我们使用flex来组装组件

我希望只使用HTML和CSS构建此组件，而不使用（这一点非常重要）JavaScript、任何库或JavaScript框架或flex（FLEXBOX）。

body，html{
宽度：100%；高度：100%；
}
.集装箱{
边框：1px纯黑；
宽度：100%；
}
.左{
浮动：左；
背景色：红色；
}
.中{
宽度：100%；
背景色：#2aff00；
}
.middle>*{
/*¿¿??*/
}
.对{
浮动：对；
背景颜色：蓝色；
}
/*clearfix*/
.货柜：之后{
内容：“；
显示：表格；
明确：两者皆有；
}

左元素。
对，埃伦。
左元素：用作标签的标签或跨度元素。宽度固定
中间元素：文本、选择等输入具有可变宽度！。它会在左侧和右侧元素之间的剩余空间中调整大小
右元素：按钮或可选输入。宽度固定

在标签和按钮元素上使用浮动，左右浮动。这将使它们脱离正常流动，并将它们推到容器的最左侧和最右侧

浮动元素也会强制标记中紧跟在它们后面的块级元素向上推到容器中，因此在标记中，您希望出现并填充浮动元素之间空间的任何内容都应该紧跟在它们后面

如果没有任何内容的高度大于浮动元素的高度，则浮动元素也会导致其容器元素的高度塌陷。我们可以通过使用clearfix解决方案来解决这个问题。一个clearfix解决方案是创建一个新的块格式上下文，因为它们的一个特性是包含浮动

块格式上下文的另一个特性是，它们尊重浮点数，当浮点数出现在它们旁边时，将缩小它们的宽度，而不是忽略浮点数。因此，您可以创建另一个块格式上下文，该上下文将考虑标签和按钮的浮动，并缩小以适应两者之间的空间。有许多方法可以创建块格式上下文。在下面的演示中，我选择将溢出设置为自动

.container{
宽度：500px；
保证金：0自动；
溢出：自动；
}
标签{
浮动：左；
}
钮扣{
浮动：对；
}
.输入容器{
溢出：自动；
填充：0 10px；
}
输入{
宽度：100%；
框大小：边框框；
}

我是标签
按钮

您可以这样尝试

.area类{
宽度：1200px；
保证金：0自动；
}
.区域级内部{
溢出：隐藏；
}
.单包装{
宽度：33%；
浮动：左；
填充：0 15px；
}
@介质（最大宽度：768px）{
.单包装{
宽度：100%；
}
}

你的内容
你的内容
你的内容

你好，谢谢你的回答！。这无法解决问题，因为溢出功能隐藏了中间容器的一部分。它不隐藏容器的一部分，而是尽可能地向左或向右移动，因为块格式将始终考虑浮动元素。将“溢出”设置为“自动”仍允许元素增长。您只需在中间元素中添加一些填充，将输入与其容器的边缘分开，我已经更新了上面的代码来显示这一点。使用你的浏览器工具检查代码，看看我关于浮动的意思。你的答案似乎与我想要的非常接近，但每次我尝试你的代码（在我的浏览器或代码笔中）时，输入的某些部分都会进入按钮元素。另外，在输入的底部添加一个滚动变量。如果您能提供我的解决方案导致的问题的屏幕截图，我将继续努力使它工作得更好，因为这个解决方案在我的机器上运行良好。我还用代码笔加了一句：只是好奇——为什么“没有弹性”？你需要支持一些古老的浏览器吗？helb是怎么说的？如果没有flexbox，这是否也意味着没有CSS网格？你能包括你支持的浏览器/版本吗？你说的flex是什么意思？Flexbox？这是CSS，所以您的要求是矛盾的。@helb请不要试图超越我刚才描述的问题。我不想使用flex的“为什么”已经不再讨论了。正如我在问题中所写，我最终使用flex解决了我的问题。我想问的是，我可以使用其他工具来实现这一点吗？。市场上长期存在的工具。@aee请不要粗鲁；如果你要强加任意的限制，而不给出任何理由，那么我们将无法帮助你解决你向我们寻求帮助的问题。