與父表

IE11嵌套Flexbox的問題，我們有一個嵌套Flexbox的，其父母是表的情況。雖然在鉻trhis行爲與預期相同，在IE-11的flexboxes不換行。與父表

https://jsfiddle.net/arnabgh/qg5rojc9/3/

我們不能做表格的佈局：固定。有沒有其他更好的方法來解決這個問題？

 <table style="border:1px solid red;width:50%";> 
    <tr> 
     <td> 
      <div class="layout flex"> 
      <div class="con flex"> 
       <label>First name</label> 
       <div class="field-item"><input /></div> 
       </div> 
       <div class="con flex"> 
       <label>Last name</label> 
       <div class="field-item"><input /></div> 
       </div> 
       <div class="con flex"> 
       <label>Address 1</label> 
       <div class="field-item"><input /></div> 
       </div> 
       <div class="con flex"> 
       <label>Address 2</label> 
        <div class="field-item"><input /></div> 
       </div> 
       <div class="con flex"> 
       <label>City</label> 
        <div class="field-item"><input /></div> 
       </div> 
       <div class="con flex"> 
       <label>State</label> 
       <div class="field-item"><input /></div> 
       </div> 
      </div> 
     </td> 
     </tr> 
    </table>

的CSS是folllows-

* { 
    box-sizing: border-box; 
} 



.layout.flex { 
    display: flex; 
    flex-flow:row wrap; 
    width:100%; 
} 

.con { 
    width:auto; 
    display: flex; 
    flex-direction:column; 

} 

label { 
    width: 120px; 
} 

.field-item { 
    flex: 1; 

}

來源

2016-05-18 Arnab Ghosh

這個問題缺乏上下文。你說你不能使用表格的佈局：固定的 - 但其他可能的限制有哪些？大概你不僅僅是桌子上的這個單元格嗎？那麼它是如何被允許或不被允許影響的呢？（爲什麼會出現在首位的表？至少你已經在這裏顯示什麼看起來並不像表格數據...） – CBroe

水平佈局僅取決於表格的寬度和列，細胞的不是內容的寬度，在你的例子你的表只有一列（td）。所以，如果你想使用的佈局表：固定你必須定義多了一個「TD」，並測試只是給他們不同的寬度

來源

2016-05-18 19:24:54

在IE中，你需要反正柔性前綴 –

回答

相關問題