Html 使div占用剩余可用空间的响应式方法

我目前正在尝试创建一个响应表单，其中文本字段和按钮相邻，文本字段占据最大可用空间，按钮只使用它需要的内容

这就是我迄今为止用来实现这一目标的方法，而且效果非常好

我的问题是，这并不是一个真正的响应性解决方案，就像您使用媒体查询来移除浮动，将字段和按钮堆叠在彼此的顶部，按钮堆叠在文本字段的顶部，而不是相反

这是一个我很快想出的办法。这正是我需要它的功能，但在某种程度上，将工作在IE8+请

多谢各位

-

编辑：

该按钮是内容管理的，因此在此实例中使用calc将不起作用&可能包含多个不能拆分为两行以上的单词

---

使用百分比宽度不考虑按钮内的文本。按钮只需要是文本和填充的宽度。如果有一个百分比，按钮上的空格会过大，或者按钮内的多个单词可能会分成两行，我真的需要将它们保持在一行，这就是我问题中的非响应解决方案非常有用的地方。不幸的是，我真的需要它的反应。无论容器大小如何，按钮始终保持相同的宽度，只是需要调整的文本框

有人知道实现这一点的方法吗？请最好>IE8（因此不幸没有flexbox）

-

到目前为止我拥有的

.container{
宽度：300px；
边框：1px实心；
}
.左{
宽度：自动；
背景：红色；
溢出：隐藏；
}
.对{
宽度：自动；
背景：蓝色；
浮动：对；
}
.文本框{
宽度：100%；
}
@仅介质屏幕和（最大宽度：300px）{
.对{
浮动：无；
}
}

---

您可以使用百分比作为宽度和

显示：内联块

另外，确保在包装器上使用
font-size:0px
删除内联块空格

.container {
    width:600px;
    height:200px;
    border:2px solid yellow;
    font-size: 0px;
}

.left {
    width:70%;
    height:200px;
    background:red;
    overflow:hidden;
    display: inline-block;
}
.right {
    height:200px;
    width:30%;
    background:blue;
    display: inline-block;
}

我不能在旧的IEs中进行测试，但我认为在重置浮点时将div设置为position:relative应该可以工作

我已将媒体查询改为使用悬停，这样更容易检查


.container{
宽度：300px；
边框：1px实心；
}
.左{
宽度：自动；
背景：红色；
溢出：隐藏；
}
.对{
宽度：自动；
背景：蓝色；
浮动：对；
}
.文本框{
宽度：100%；
}
.容器：悬停。对{
浮动：无；
位置：相对位置；
顶部：20px；
}

嗯，您可以使用百分比作为宽度。。。使用百分比宽度不会考虑按钮内的文本。按钮只需要是文本和填充的宽度。如果按钮上有一个百分比，那么按钮上的间距会过大，如果按钮内有很多单词，那么这些单词可能会分成两行，我真的需要将它们保持在一行，这就是非响应解决方案非常方便的地方。不幸的是，我真的需要它具有响应性。我添加了一个flex box示例，向您展示我正在寻找的确切功能，使用百分比宽度时不考虑按钮内的文本。按钮只需要是文本和填充的宽度。如果有一个百分比，按钮上的空格会过大，或者按钮内的多个单词可能会分成两行，我真的需要将它们保持在一行，这就是我问题中的非响应解决方案非常有用的地方。不幸的是，我真的需要它的反应。无论容器大小如何，按钮始终保持相同的宽度，只是需要调整的文本框。无论如何，谢谢你可以将最大宽度设置为标题。我不知道按钮的宽度。不幸的是，该组件需要尽可能地重复使用。我已经制作了一个quick flex box版本，以显示我正在寻找的确切功能，但显然，对于不支持flexbox的旧浏览器，我需要一个替代解决方案或解决方案。请你看一下好吗？