爲什麼只有元素按特定順序隱藏溢出才能工作？

Question

從this question，意圖是在同一行上有一個選擇框和按鈕，選擇框寬度填充所有可用空間。

這可以用下面的HTML來實現：

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-xs-3 control-label" for="droplist">Select item:</label> 
     <div class="col-xs-9"> 
      <button class="btn btn-primary">Action!</button> 
      <div class="wrapper"> 
       <select id="droplist"> 
        <option>Value 1</option> 
        <option>Value 2</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</form> 

和CSS：

.wrapper { 
    overflow: hidden; 
    margin-top: .5ex; 
} 
select { 
    width: 100%; 
} 
button { 
    float: right; 
} 

JsFiddle

如果按鈕移動到是包裝DIV之後 - 這對我來說是結構上直觀的地方 - 然後按鈕被推到下一行。

現在的問題是： 爲什麼顛倒按鈕和包裝div元素的順序會導致按鈕移動到新行？

Answer 1

由於沒有設置按鈕寬度，要自動填充寬度，您需要將flexbox應用於col-xs-9容器。

.col-xs-9 { 
 
    width: 75%; 
 
    display: flex; 
 
} 
 

 
.wrapper { 
 
    margin-top: .5ex; 
 
    flex: 1; 
 
} 
 

 
select { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
    <label class="col-xs-3 control-label" for="droplist">Select item:</label> 
 
    <div class="col-xs-9"> 
 
     <div class="wrapper"> 
 
     <select id="droplist"> 
 
      <option>Value 1</option> 
 
      <option>Value 2</option> 
 
     </select> 
 
     </div> 
 
     <button class="btn btn-primary">Action!</button> 
 
    </div> 
 
    </div> 
 
</form>

編輯：

至於爲什麼你的代碼不能正常工作，那是因爲你是浮動的一切權利，使該按鈕首先被放置到右側，由你wrapper遵循了沒有寬度設置。所以overflow: hidden設法保持select元素在同一行。如果您刪除了overflow，則select元素將移動到下一行。

當扭轉wrapper和button的順序，wrapper首先設置爲正確的和作爲childselect元件具有100的width％，它填滿整個空間，因爲包裝不具有寬度設置，溢出是毫無意義的。因此，button換到下一行

Answer 2

編輯

這是一個有點神祕，但我最好的猜測是，因爲CSS是層疊，當按鈕之前，它現在對當'浮動迴流'完成時按鈕的大小，所以div寬度根據按鈕進行調整。但如果按鈕之後，CSS不知道，並且寬度佔用所有可用空間。

您應該始終在浮動項上設置寬度（除非直接應用於圖像 - 具有隱式寬度）。如果未設置寬度，則結果可能無法預測。

另一個解決辦法可能是使用display: table

.col-xs-9 { 
 
    display: table; 
 
} 
 

 
.wrapper { 
 
    overflow: hidden; 
 
    margin-top: .5ex; 
 
    width: 100%; 
 
} 
 
select { 
 
    width: 100%; 
 
} 
 

 
.wrapper, 
 
button { 
 
    display: table-cell; 
 
}

<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
     <label class="col-xs-3 control-label" for="droplist">Select item:</label> 
 
     <div class="col-xs-9"> 
 
      
 
      <div class="wrapper"> 
 
       <select id="droplist"> 
 
       <option>Value 1</option> 
 
       <option>Value 2</option> 
 
       </select> 
 
      </div> 
 
      
 
      <button class="btn btn-primary">Action!</button> 
 
     </div> 
 
    </div> 
 
</form>