如何設置以下標記以允許所描述的佈局。跨多列的樣式輸入和文本區域（無div）
<form>
<input name="one">
<input name="two">
<input name="three">
<input name="four">
<input name="five">
<input name="six">
<textarea></textarea>
</form>
有以下佈局：
input input textarea
input input
input input
如果使用textarea as first element，那麼你必須達到
form{
width:100%;
display:table;
}
input{
width:30%;
display:inline-block;
}
textarea{
width:33.33%;
float:right;
display:inline-block;
}<form>
<textarea></textarea>
<input name="one">
<input name="two">
<input name="three">
<input name="four">
<input name="five">
<input name="six">
</form>這個怎麼樣？
form{
position: relative;
}
input{
display: inline-block;
width: 35%;
}
textarea{
position: absolute;
right: 0;
top: 0;
}
/*or*/
form{
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
有沒有辦法做到這一點，沒有絕對的？ –
如果你願意把第二個輸入後的textarea –
我試過了列數的方式，但是在前兩列中輸入2個輸入，然後在第三個輸入中輸入textarea和最後2個輸入。 –
如果您使用cn的它Bootstrap會更容易
<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>
<div class="row">
<div class="col-md-6">
<input name="one">
<input name="two">
<input name="three">
<input name="four">
<input name="five">
<input name="six">
</div>
<div class="col-md-6">
<textarea></textarea>
</div>
</div>
</form>我會用div但你可以做
<form>
<table>
<tr>
<td><input name="one"></td>
<td><input name="four"></td>
<td rowspan="3"><textarea></textarea></td>
</tr>
<tr>
<td><input name="two"></td>
<td><input name="five"></td>
</tr>
<tr>
<td><input name="three"></td>
<td><input name="six"></td>
</tr>
</table>
</form>只是使用表，如果你不想使用div。
td{
display:block;
}<form>
<table>
<th>
<td><input name="one"></td>
<td><input name="two"></td>
<td><input name="three"></td>
</th>
<th>
<td><input name="four"></td>
<td><input name="five"></td>
<td><input name="six"></td>
</th>
<th>
<td><textarea></textarea></td>
</th>
</table>
</form><!--Below is the inline css code with html... You can also separate it if nedded-->
<form style="float:left;width:100%">
<div style="float:left;width:30%;height:auto">
<input name="one" style="width:100%">
<input name="two" style="width:100%">
<input name="three" style="width:100%">
</div>
<div style="float:left;width:30%;height:auto">
<input name="four" style="width:100%">
<input name="five" style="width:100%">
<input name="six" style="width:100%">
</div>
<div style="float:left;width:30%;height:auto">
<textarea style="width:100%"></textarea>
</div>
</form>
試試這個，使用表
textarea
{
height:100px
}<form>
<table>
<tr>
<td><input name="one"></td>
<td><input name="two"></td>
<td rowspan=3><textarea></textarea></td>
</tr>
<tr>
<td> <input name="three"></td>
<td><input name="four"></td>
</tr>
<tr>
<td><input name="five"></td>
<td> <input name="six"></td>
</tr>
</table>
</form>
爲什麼沒有申報單？你可以使用表格，但是使用表格已經被棄用了，因爲你在'CSS3'中有'display：table-cell'和類似的東西。 – elementzero23
你可以用textarea的絕對位置來做到 - 你想用什麼東西？如何添加包裝元素的JavaScript？ –
Divs將是後備，但我寧願保持標記儘可能乾淨（如果可以的話），絕對定位再次不理想。如果需要絕對地使用div，會使用div。 –