柔性框大小沒有增加

Question

在下面的代碼，

<style type="text/css"> 
      #header{ 
       height: 20px; 
       background-color: #2A646C; 
       width: 50%; 
       margin: auto; 
      } 
      #container{ 
       display:flex; 
       flex-wrap: wrap; 
       border: 2px solid red; 
       width: 50%; 
       margin: auto; 
       padding: 10px; 
       background-color: #C4D8E2; 
      } 
      #container1{ 
       border: 2px solid yellow; 
       width: 100%; 
       background-color: #C4D8E2; 
      } 
      #container1 p span{ 
       background-color: #C4D8E2; 
       color: #5D8AA8; 
       font-family: sans-serif; 
       font-size: 12px; 
      } 
      #container1 h3{ 
       background-color: #C4D8E2; 
      } 
      #container2{ 
       border: 2px solid blue; 
       width: 45%; 
       background-color: #C4D8E2; 
       margin-right: 8%; 
       display:flex; 
       flex-wrap: wrap; 
      } 
      #container2 form{ 
       width: 100%; 
       height: 100%; 
      } 
      #container2 p{ 
       width:100%; 
      } 
      #container2 span{ 
       font-weight: bold; 
       font-family: "Times New Roman"; 
       font-size: 16px; 
      } 
      #container2 #span1{ 
       color: #5D8AA8; 
       margin-right: 5px; 
      } 
      #container2 #span2{ 
       color: #5072A7; 
      } 
      #container2 input[type=submit]{ 
       border: 1px solid black; 
       width: 25%; 
       height: 40%; 
       margin-left: 68%; 
       background-color: #C4D8E2; 
      } 
      #container3{ 
       border: 2px solid green; 
       width: 45%; 
       background-color: #5072A7; 
       color: white; 
      } 
      #container3 form{ 
       width: 100%; 
       height: 100%; 
      } 
      #container3 input[type=submit]{ 
       border: 2px solid orange; 
       background-color: #5072A7; 
       width: 25%; 
       height: 10%; 
       margin-left: 68%; 
      } 
      #container3:nth-child(10){ 
       font-size: 14px; 

      } 
      #container3:nth-child(16){ 
       display: inline-block; 
       font-size: 10px; 
       font-style: underline; 
       margin-left: 68%; 
      } 
     </style> 

---

<div id="header"></div><br><br> 
     <div id="container"> 
      <div id="container1"> 
       <h3>Enter the system</h3> 
       <p><span>It is necessary to login in Your account in order to sign up for a course.</span></p> 
      </div> 

      <div id="container2"> 
       <p><span id="span1">ARE YOU NEW?</span><span id="span2">REGISTER</span></p> 
       <form method="POST" action="javascript:void(0)" enctype="multipart/form-data"> 
        <input type="text" name="username" required placeholder="User name" autocomplete="off" 
           pattern="^[A-Za-z0-9._-]{6,10}$" size="40" maxlength="10"> 
       <br><br> 
       <input type="email" name="emailid" required placeholder="Email" autocomplete="off" 
            pattern="^[A-Za-z0-9 _.-]+@[A-Za-z.-]+\.[A-Za-z]{3,4}$" size="40" maxlength="30"> 
       <br><br> 
       <input type="password" name="password" required placeholder="Password" autocomplete="off" 
            pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15"> 
       <br><br> 
       <input type="password" name="confirmpassword" required placeholder="Confirm Password" 
            pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15" autocomplete="off"> 
       <br><br> 
       <input type="submit" name="register" value="Register"> 
       </form> 
      </div> 

      <div id="container3"> 
       <form method="POST" action="javascript:void(0)" enctype="multipart/form-data"> 
        <p><span class="span3">ALREADY A STUDENT?</span><span class="span4">LOGIN</span></p> 
        <br><br> 
        <input type="text" name="loginname" required placeholder="User name" autocompleter="off" 
            pattern="^[A-Za-z0-9._-]{6,10}$" size="40" maxlength="10"> 
        <br><br> 
        <input type="password" name="loginpassword" required placeholder="Password" autocompleter="off" 
             pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15"> 
        <br><br> 
        <input type="checkbox" name="remember" value="yes" id="remember"><label for="remember">Remember me?</label> 
        <br><br> 
        <input type="submit" name="login" value="Login" id="loginbutton"> 
        <br> 
        <label>Forgotpassword?</label> 

       </form> 
      </div> 

     </div> 

---

1）container2或container3大小包括附加的元件，爲什麼後不增加高度？

2）如何使用nth-child挑選最後兩個標籤container3？

Answer 1

你的第一點...

把BTN高度PX將解決您的問題

  #container2 input[type=submit]{ 
      border: 1px solid black; 
      width: 25%; 
      height: 40px; 
      margin-left: 68%; 
      background-color: #C4D8E2; 
     } 

看到這個小提琴 https://jsfiddle.net/b4mdz048/ 加上最好的做法是填充添加到按鈕它更好

我會建議你使用引導程序或其他CSS框架

Answer 2

1）container2或container3包含其他元素後大小不會增加，爲什麼？

因爲您的整體容器寬度限制爲width: 50%。

DEMO 1（原密碼不變）

試試這個調整：

#container{ 
    display:flex; 
    flex-wrap: wrap; 
    border: 2px solid red; 
    min-width: 50%; /* adjusted */ 
    margin: auto; 
    padding: 10px; 
    background-color: #C4D8E2; 
} 

DEMO 2

2）如何使用第n個孩子挑選最後兩個標籤容器3的？

#container3 > form > label:nth-last-of-type(1) { font-weight: bold; color: red; } 
#container3 > form > label:nth-last-of-type(2) { font-weight: bold; color: aqua; } 

DEMO 3

更多信息參見：http://www.w3.org/TR/css3-selectors/#selectors

---

的替代方法演示2 ...

在你不喜歡改變事件寬度整個柔性容器的約束，你可以使表單flex容器，它將表單元素限制在容器的邊界。

所以不是這樣（如上文所述）：

#container{ 
    display:flex; 
    flex-wrap: wrap; 
    border: 2px solid red; 
    min-width: 50%; /* adjusted */ 
    margin: auto; 
    padding: 10px; 
    background-color: #C4D8E2; 
} 

試試這個：

#container2 form{ 
    width: 100%; 
    height: 100%; 
    display: flex;   /* new */ 
    flex-direction: column; /* new */ 
} 

#container3 form{ 
    width: 100%; 
    height: 100%; 
    display: flex;   /* new */ 
    flex-direction: column; /* new */ 
} 

DEMO 4

---

更新（根據意見和修訂後的問題）

使用DEMO 4，我們可以改善的提交按鈕與此顯示：它總

#container2 input[type=submit]{ 
     border: 1px solid black; 
     /* width: 25%; */ 
     height: 40%; 
     /* margin-left: 68%; */ 
     background-color: #C4D8E2; 

     /* new */ 
     margin-left: auto; 
     margin-right: 5%; 
     width: 75px; 
} 

#container3 input[type=submit]{ 
     border: 2px solid orange; 
     background-color: #5072A7; 
     /* width: 25%; */ 
     height: 10%; 
     /* margin-left: 68%; */ 

     /* new */ 
     margin-left: auto; 
     margin-right: 5%; 
     width: 75px; 
} 

DEMO 5

Answer 3

關於你的第二點...

你有2個標籤 所以你可以使用「nth-type-type」 查看我爲標籤給出顏色的代碼。

#container3 label { 
    background: #f0f none repeat scroll 0 0; 
} 
#container3 label:nth-of-type(1) { 
    background: #ff0 none repeat scroll 0 0; 
} 
#container3 label:nth-of-type(2) { 
    background: #f00 none repeat scroll 0 0; 
}