在响应式特性中合并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）来响应宽度百分比％{ .myclass { 将每个输入展开为100％ } }