0

複数の列を含む可能性のある別の div の周りに「div」を配置しようとしています。

ただし、ここでわかるように 

<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 のみが最初の列と同じ幅です。この3つをすべて収めたいと思います。

ここで何が欠けていますか？

4

3 に答える 3

1 
.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;
}
于 2016-04-25T18:12:11.067 に答える
0

2つのことを変更しました

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/

于 2016-04-25T17:56:48.553 に答える