Flex：如何将 2 行的内容相互对齐（宽度相同）

Question

我正在尝试将 2 行的内容相互对齐。第 1 行中的第一列需要与行中的第一列具有相同的宽度。我正在使用 CSS flex，但我不知道如何将这些列相互对齐。我需要什么来实现这个目标？

Attachment

提前谢谢你！

<div id="padding_div_LogOnFrm_VB_VB">
<div id="table_LogOnFrm_VB_VB" style="background-color:inherit;display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-basis:100%;flex-direction:column;;align-items:flex-start;align-self:flex-start;">
    <div style="display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;height:100%;justify-content:flex-start;">
        <div style="flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;; ; align-self:center;; align-items:flex-start;">
            <div style = "align-items:flex-start;">
                <span class="dxeBase_Material" id="LogOnFrm_VB_VB_Label" style="white-space:nowrap;margin:2px;">Gebruiker</span>
            </div>
        </div>
        <div style="flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;; ; align-self:center;; align-items:stretch;">
            <div id="div_LogOnFrm_VB_VB_TextBox" style = ";display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-direction:row;justify-content:inherit;align-items:inherit;align-self:inherit;">
                <table class="dxeTextBoxSys dxeTextBox_Material tooltip dxeTextBoxDefaultWidthSys" id="LogOnFrm_VB_VB_TextBox" style="border-color:#D1D1D1;background:#ffffff;text-align:left;text-align-last:left;margin:2px;flex:1 1 auto;">
                    <tr>
                        <td class="dxic" style="width:100%;"><input class="dxeEditArea_Material dxeEditAreaSys" id="LogOnFrm_VB_VB_TextBox_I" name="LogOnFrm_VB_VB_TextBox" onfocus="ASPx.EGotFocus(&#39;LogOnFrm_VB_VB_TextBox&#39;)" onblur="ASPx.ELostFocus(&#39;LogOnFrm_VB_VB_TextBox&#39;)" onchange="ASPx.EValueChanged(&#39;LogOnFrm_VB_VB_TextBox&#39;)" type="text" maxlength="20" /></td>
                    </tr>
                </table><script id="dxss_45910637" type="text/javascript">
                <!--
                ASPx.createControl(ASPxClientTextBox,'LogOnFrm_VB_VB_TextBox','',{'initialFocused':true,'scStates':6,'scPostfix':'Material','cpTextBoxModelId':'LogOnFrm','cpTextBoxBackgroundColor':'#ffffff','cpTextBoxMemberName':'LogOnFrm_VB_VB_TextBox','cpTextBoxIsAlwaysReadOnly':false,'cpTextBoxValueIsNumeric':false,'cpTextBoxPlaceholder':null,'cpTextBoxTextChangedUrl':'/LogOnFrm/HandleVB_VB_TextBoxTextChanged','cpTextBoxCurrentValue':''},{'Init':$.AI.Ui.TextBox.handleInit,'KeyDown':$.AI.Ui.TextBox.handleKeyDown,'KeyUp':$.AI.Ui.TextBox.handleKeyUp},null,{'decorationStyles':[{'key':'F','className':'dxeFocused_Material','cssText':''}]});

                //-->
                </script>

            </div>
        </div>
    </div>
    <div style="display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;height:100%;justify-content:flex-start;">

    <div style="flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;; ; align-self:center;; align-items:flex-start;">
        <div style = "align-items:flex-start;">
            <span class="dxeBase_Material" id="LogOnFrm_VB_VB_Label2" style="white-space:nowrap;margin:2px;">Wachtwoord</span>
        </div>
    </div>
    <div style="flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;; ; align-self:center;; align-items:stretch;">
        <div id="div_LogOnFrm_VB_VB_TextBox2" style = ";display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-direction:row;justify-content:inherit;align-items:inherit;align-self:inherit;">
            <table class="dxeTextBoxSys dxeTextBox_Material tooltip dxeTextBoxDefaultWidthSys" id="LogOnFrm_VB_VB_TextBox2" style="border-color:#D1D1D1;background:#ffffff;text-align:left;text-align-last:left;margin:2px;flex:1 1 auto;">
                <tr>
                    <td class="dxic" style="width:100%;"><input class="dxeEditArea_Material dxeEditAreaSys" id="LogOnFrm_VB_VB_TextBox2_I" name="LogOnFrm_VB_VB_TextBox2" onfocus="ASPx.EGotFocus(&#39;LogOnFrm_VB_VB_TextBox2&#39;)" onblur="ASPx.ELostFocus(&#39;LogOnFrm_VB_VB_TextBox2&#39;)" onchange="ASPx.EValueChanged(&#39;LogOnFrm_VB_VB_TextBox2&#39;)" type="password" maxlength="25" /></td>
                </tr>
            </table><script id="dxss_709945820" type="text/javascript">
            <!--
            ASPx.createControl(ASPxClientTextBox,'LogOnFrm_VB_VB_TextBox2','',{'scStates':6,'scPostfix':'Material','cpTextBoxModelId':'LogOnFrm','cpTextBoxBackgroundColor':'#ffffff','cpTextBoxMemberName':'LogOnFrm_VB_VB_TextBox2','cpTextBoxIsAlwaysReadOnly':false,'cpTextBoxValueIsNumeric':false,'cpTextBoxIsPassword':true,'cpTextBoxPlaceholder':null,'cpTextBoxTextChangedUrl':'/LogOnFrm/HandleVB_VB_TextBox2TextChanged','cpTextBoxCurrentValue':''},{'Init':$.AI.Ui.TextBox.handleInit,'KeyDown':$.AI.Ui.TextBox.handleKeyDown,'KeyUp':$.AI.Ui.TextBox.handleKeyUp},null,{'decorationStyles':[{'key':'F','className':'dxeFocused_Material','cssText':''}]});

            //-->
            </script>

        </div>
    </div>
</div>

杰勒

Answer 1

我希望它有效

html

  <div id="root">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
       </div>

css

  #root {
      display: flex;
      flex-wrap: wrap;


  }
  #root > div {
     flex-glow: 1;
     width: 50%;
  }