調整Web窗體

Question

我有兩種形式，我想對齊。我能夠弄清楚如何調整高度，但我無法讓寬度按我想要的方式工作。

在我的情況下，我想要左邊的框填寫剩餘空間。使用'自動'只是填補空間來適應內容。所以不是擴展形式，而是兩種形式之間存在差距。

我需要這個的原因是我也有這種形式的PHP。有一個標誌，決定了第二種形式是否出現。所以如果只有一種形式，我希望它擴大整個空間。如果有兩種形式，我希望他們分享空間。

我認爲這樣做的方式是將正確的形式設置爲特定的寬度，並且左表單模具是否存在其他任何內容。我只是無法弄清楚如何在不指定確切寬度的情況下讓左側表單自行展開。

我已經在下面的HTML和CSS以及JSFiddle reference。

HTML

<div class="section"> 
    <div class="container"> 
     <form> 
      <fieldset class="left"> 
       <legend>PC Management</legend> 
       <div> 
        <input type='submit' value='Backup' /> 
        <input type='submit' value='Backup' /> 
        <input type='submit' value='Backup' /> 
       </div> 
      </fieldset> 
     </form> 
     <form> 
      <fieldset class="right"> 
       <legend>PC Management</legend> 
       <div> 
       </div> 
      </fieldset> 
     </form> 
    </div> 
</div> 

CSS

.section { 
    margin: 0 auto; 
    text-align: center 
} 
.container { 
    height: 100px; 
    width: 500px; 
} 
.container form, .container fieldset, .container input { 
    height: 100%; 
    display: inline; 
} 
.left { 
    width: auto; 
    float: left; 
} 
.right { 
    width: 40%; 
    float: right; 
} 

Answer 1

display: flex會得到你想要的動態調整，而無需任何JavaScript：

.section { 
 
    margin: 0 auto; 
 
    text-align: center 
 
} 
 
.container { 
 
    height: 100px; 
 
    width: 500px; 
 
    display: flex; 
 
} 
 
.container form { 
 
    flex: 1 1 auto; 
 
} 
 
.container form, .container fieldset, .container input { 
 
    height: 100%; 
 
}

<div class="section"> 
 
    <div class="container"> 
 
     <form class="left"> 
 
      <fieldset> 
 
       <legend>PC Management</legend> 
 
       <div> 
 
        <input type='submit' value='Backup' /> 
 
        <input type='submit' value='Backup' /> 
 
        <input type='submit' value='Backup' /> 
 
       </div> 
 
      </fieldset> 
 
     </form> 
 
     <form class="right"> 
 
      <fieldset> 
 
       <legend>PC Management</legend> 
 
       <div> 
 
       </div> 
 
      </fieldset> 
 
     </form> 
 
    </div> 
 
</div>

http://jsfiddle.net/eeLfx9d6/1/