按規則水平放置兩個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>