表中的多列div：包含div只有第一列的寬度

Question

我試圖把「div」放在另一個可能包含多列的div上。

然而，正如你可以看到here

<table class="datatable"> 
<tr> 
    <td class="leftcolumn">Radiobuttons:</td> 
    <td class="rightcolumn"> 
     <div style="border: 2px solid grey;"> 
     before 
     <div class="morecols"> 
      <label><input type="radio" name="ctypeid" value="1" /> One</label><br /> 
      <label><input type="radio" name="ctypeid" value="2" /> Two</label><br /> 
      <label><input type="radio" name="ctypeid" value="3" /> Three</label><br /> 
      <label><input type="radio" name="ctypeid" value="4"checked="checked" /> Four</label><br /> 
      <label><input type="radio" name="ctypeid" value="5" /> Five</label><br /> 
      <label><input type="radio" name="ctypeid" value="6" /> Six</label><br /> 
      <label><input type="radio" name="ctypeid" value="7" /> Seven</label><br /> 
      <label><input type="radio" name="ctypeid" value="8" /> Eight</label><br /> 
      <label><input type="radio" name="ctypeid" value="9" /> Nine</label> 
     </div>after 
     </div> 
    </td> 
</tr> 
</table> 

的藍色DIV僅是一樣寬的第一列。我想包含他們三個。

我在這裏錯過了什麼？

Answer 1

我已經改變了兩件事情

1. 100％的寬度，以你的表

<table class="datatable" width="100%"> 

2.減少」 .morecols'類爲100px寬;

.morecols { 
    height: 65px; 
    -moz-columns: 100px; 
    -webkit-columns: 100px; 
    columns: 100px; 
    border: 1px solid black; 
    column-rule: 1px solid grey; 
    background-color: #ccccff; 
} 

現在看起來不錯。

檢查更新小提琴這裏：https://jsfiddle.net/b4fucp5x/1/

Answer 2

.morecols { <br> 
    height: 65px; 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
    -moz-column-count: 3; /* Firefox */ 
    border: 1px solid black; 
    column-rule: 1px solid grey; 
    background-color: #ccccff; 
} 

Answer 3

所以，你不知道有多少列會有你不想表格不能超過必要更寬。

好了再這樣我做了兩件事情做你提供的代碼

1. 從「morecols」 DIV刪除<br>標籤。

2. 將float添加到所有標籤並打破第三個標籤float以適合您的給定高度。

這裏是一個更新小提琴：https://jsfiddle.net/b4fucp5x/6/