html - 按规则水平放置两个html元素

Question

我想并排放置带有按钮的文本框。但是接下来的规则:

1) TextBox 必须填充屏幕的所有可用宽度空间(leftpanel div)

2) 按钮具有固定的宽度和高度，必须始终保持在浏览器的右边缘。 (右面板 div)

我的 CSS 样式:

<style type="text/css">
    div.centerpanel {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .leftpanel {
        background: red;
        display: inline-block;
        width: 90%;
        float: left
    }

    .rightpanel {
        background: blue;
        display: inline-block;
        width: 10%;
        float: left
    }
</style>

全屏效果很好。但是，如果我通过拖动部分修剪的边缘/Angular 按钮使浏览器窗口很快。

示例(接近全屏):

示例(拖动小屏幕后):

我想要的:

Answer 1

有两种方法可以实现你的布局，

第一个flexbox

.flexwrap {
  display: flex;
  width: 100%:
}

.flexwrap input {
  flex: 1 1;
  margin-right:10px;
}

<div class=flexwrap>
  <input>
  <button>+</button>
</div>

第二个表

.tablewrap {
  display: table;
  width: 100%;
}
.tablewrap .t-cell {
  display: table-cell;
}
.tablewrap .t-cell input {
  width: 100%;
}
.tablewrap .t-cell:first-child{
  padding-right:20px;
}
.tablewrap .t-cell:last-child {
  width:20px;
}

<div class=tablewrap>
  <span class=t-cell>
    <input>
  </span>
  <span class=t-cell>
    <button>+</button>
  </span>
</div>