html - 将两个 div 合并到一个具有响应功能的 div 中

Question

我正在 asp.net 中制作响应式表单。我想将两个具有响应功能的 div 结合起来。这是详细信息 Out put of my code

.container {
  padding-right: 15px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}
.txtBoxLeft {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: solid 1px #5250fb;
  float: left;
  width: auto;
  padding: 14px;
  font-size: 16px;
  background-color: #908fff;
  color: white;
}
.txtBoxRight {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border: solid 1px #5250fb;
  float: left;
  font-size: 16px;
  padding: 14px;
  margin-right: 12px;
}
.txtBoxRight:focus {
  border: solid 1px #908fff;
  background-color: #f3f4ff;
}
.txtBoxRight-1 input[type="text"] {
  width: 70%;
  margin-bottom: 12px;
}
.txtBoxRight-7 input[type="text"] {
  width: 30%;
  margin-bottom: 12px;
}

<div class="container">
  <div class="txtBoxLeft">CNIC #</div>
  <div class="txtBoxRight-1">
    <asp:TextBox ID="txtCNIC" CssClass="txtBoxRight" runat="server"></asp:TextBox>
  </div>
</div>
<div class="container">
  <div class="txtBoxLeft">Drop 1-ID</div>
  <div class="txtBoxRight-7">
    <asp:TextBox ID="txtDrop1ID" Class="txtBoxRight" runat="server" ToolTip="ID"></asp:TextBox>
  </div>
</div>

我附上了代码和输出。提前致谢

Answer 1

设置容器宽度 100% ，然后根据需要给每个控件想要响应的宽度百分比 % ，对于移动响应，请使用此代码

@media(最大宽度:768px){ 。我的课 { 将每个输入扩展到 100% }