Question

我目前正在尝试创建一个响应式表单，其中包含文本字段和彼此相邻的按钮，其中文本字段占用了最大可用空间，而按钮只是使用了它所需的内容。

到目前为止，{p> This tutorial是我用来实现这一目标的，而且效果非常好。

我的问题是，这不是一个真正的响应式解决方案，就好像你使用媒体查询删除浮动将字段和按钮堆叠在一起，按钮堆叠在文本字段的顶部而不是反过来说。

这是flexbox example我很快就掀起了。这正是我需要它运行的方式，但其方式可以在IE8 +上运行。

谢谢

-

编辑：

该按钮是内容管理的，因此使用calc将无法在此实例中使用＆amp;可以包含多个单词，这些单词不能分成两行+。

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

有没有人知道实现这一点的方法请优选＆gt; IE8（不幸的是没有flexbox）

-

到目前为止我有什么

https://jsfiddle.net/ncpk6qp9/

＆＃13;

.container {
  width: 300px;
  border: 1px solid;
}
.left {
  width: auto;
  background: red;
  overflow: hidden;
}
.right {
  width: auto;
  background: blue;
  float: right;
}
.textbox {
  width: 100%;
}
@media only screen and (max-width: 300px) {
  .right {
    float: none;
  }
}

＆＃13;

<div class="container">
  <div class="right">
    <input type="submit" />
  </div>
  <div class="left">
    <input type="text" class="textbox" />
  </div>
</div>

＆＃13;

Answer 1

您可以使用百分比作为宽度和display: inline-block;

另外，请确保在包装器上使用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;
}

JSFiddle link

Answer 2

我无法在旧的IE中测试，但我认为将div设置为position：在重置浮点数时相对应该有效。

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

.container {
  width: 300px;
  border: 1px solid;
}
.left {
  width: auto;
  background: red;
  overflow: hidden;
}
.right {
  width: auto;
  background: blue;
  float: right;
}
.textbox {
  width: 100%;
}
.container:hover  .right {
    float: none;
    position: relative;
    top: 20px;
  }

<div class="container">
  <div class="right">
    <input type="submit" />
  </div>
  <div class="left">
    <input type="text" class="textbox" />
  </div>
</div>

制作div的响应方法占用剩余的可用空间

2 个答案: