将具有不同大小输入的多个列分组

Question

我需要显示大量输入。我试图将它们压缩成类似的组。我拥有的第一组将在3列中有6个输入，但第三个输入框很大，所以我希望下一行输入与较大文本框的底部对齐。 Form Layout

我试过浮动它们，列出它们，使用表格，但都没有成功

我查看了很多CSS代码片段，但无法弄清楚如何获得此布局。任何帮助将不胜感激。

编辑：我找到了一种方法让它工作，但想要一个更优雅的解决方案。 HTML：

    .row1 {
        float: left;
        background-color: #ffffff;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        font-family: Raleway, sans-serif;
        text-align: center;
        text-decoration: none;
        padding: 5px;
    }
    .row2{
        float: left;
        background-color: #ffffff;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        font-family: Raleway, sans-serif;
        text-align: center;
        text-decoration: none;
        padding: 5px;
    }
    .row3{
        float: left;
        display: inline-block;
        clear: left;
        position: relative;
        margin-top: -80px;
    }

<div class="row1">
                    <label>
                        <span>Full Project Number</span><br>
                        <input type="text" name="project" id="project">
                    </label>
            </div>
            <div class="row1">
                    <label>
                        <span>Client</span><br>
                        <input type="text" name="client" id="client">
                    </label>
            </div>
        </div>
        <div class="row2 fasttimesatseedmonthigh">
            <label id="descrp">
                <span>Project Description</span><br>
                <textarea name="name" type="text" cols="50" rows="10"></textarea>
            </label>
        </div>
        <div class="row3">
            <div class="row1">
                <label for="drawing">
                        <span>Drawing Number</span><br>
                        <input type="text" name="drawing" id="drawing">
                    </label>
            </div>
            <div class="row1">
                <label>
                        <span>Assigned By:</span><br>
                        <input type="text" name="assigned" id="assigned" style="width: 75px;">
                    </label>
            </div>
            <div class="row1">
                <label class="form-row">
                        <span>Date</span><br>
                        <?php
                        $stamp=date("Y/m/d");?>
                        <input type="text" name="date" id="date" value="<?php echo(htmlspecialchars($stamp))?>"/>
                    </label>
            </div>
        </div>

它有效，但就像我说的不那么好。

Answer 1

带有行＆amp; colspan的好桌子怎么样？

.grid{
	border: solid 1px black;
	table-layout: fixed;
	font-family: Raleway, sans-serif;
	border-spacing: 10px;
}

.grid td{
	text-align: center;
	vertical-align: top;
	font-size: 9pt;
}
.grid td.wide{
	width: 200px;
}
.grid td.normal{
	width: 100px;
}
.grid td input{
	width: 100%;
}

<table class="grid">
	<tr>
		<td colspan="2" class="wide">
			<label>
				<span>Full Project Number</span><br>
				<input type="text" name="project" id="project">
			</label>
		</td>
		<td colspan="2" class="wide">
			<label>
			 	<span>Client</span><br>
			 	<input type="text" name="client" id="client">
			 </label>
		</td>
		<td colspan="2" rowspan="2">
			<label id="descrp">
            	<span>Project Description</span><br>
            	<textarea name="name" type="text"  cols="20" rows="8"></textarea>
            </label>
		</td>
	</tr>
	<tr>
		<td colspan="1" class="normal">
			<label for="drawing">
				<span>Drawing Number</span><br>
				<input type="text" name="drawing" id="drawing">
			</label>
		</td>
		<td colspan="1" class="normal">
			<label>
				<span>Assigned By</span><br>
				<input type="text" name="assigned" id="assigned">
			</label>
		</td>
		<td colspan="2" class="wide">
			<label class="form-row">
				<span>Date</span><br>
				<input type="text" name="date" id="date">
			</label>
		</td>
	</tr>
</table>

Plis没有仇恨。