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

Question

我想把文本框并排放在一起。 但随着下一个规则：

1）文本框必须填写屏幕（leftpanel格的所有自由空间宽度）

2）按钮具有固定的宽度和高度，必须始终坚持以浏览器的右边缘。 （rightpanel 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> 

在全屏幕效果很好。但是，如果我通过拖动边缘/角落按钮部分修剪使浏览器窗口很短。

（接近全屏）样本：

样品（拖动小屏幕后）：

我想要什么：

Answer 1

有两种方法实现您的布局，

首先flexbox

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

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

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

二table

.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>