我一直在寻找一种使用 CSS 生成以下 HTML 表格的方法:
<style type="text/css">
table.frm tr td { vertical-align: top; padding-right: 10px; }
</style>
<table class="frm">
<tr>
<td rowspan="2">Label 1:</td>
<td><input type="text" /></td>
<td rowspan="2">Label 2:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Validation Message 1</td>
<td>Validation Message 2</td>
</tr>
<tr>
<td rowspan="2">Label 3:</td>
<td><input type="text" /></td>
<td rowspan="2">Label 4:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Validation Message 3</td>
<td>Validation Message 4</td>
</tr>
</table>
当我尝试用 div 替换它时遇到的问题是我无法对齐两者列和行。我试过使用 float 来对齐列,但后来我松开了行的垂直对齐方式。但是,如果我使用 clear 来对齐行,我就会松开列的水平对齐方式。
我看到的许多将表格转换为 div 的示例都使用固定或百分比宽度,但我希望布局具有与表格相同的流畅行为,因为验证消息可能会或可能不会出现,标签/字段将有不同的大小。
有没有设计师可以告诉我如何在没有表格的情况下实现这种布局?
最佳答案
这不是 display
(CSS2) 的问题,但它需要 IE7+。请看this example fiddle :
标记:
<form>
<span>
<label for="edit1">First label:</label><input id="edit1" type="text" />
<label for="edit2">Second label:</label><input id="edit2" type="text" />
</span>
<span>
<br /><p>That sounds right!</p>
<br /><p>Problem!</p>
</span>
<span>
<label for="edit3">3:</label><input id="edit3" type="text" />
<label for="edit4">Fourth and last label:</label><input id="edit4" type="text" />
</span>
<span>
<br /><p>No succes. Try again and enter another value.</p>
<br /><p>Wait...</p>
</span>
</form>
样式表:
form {
display: table;
}
form span {
display: table-row;
}
form span * {
vertical-align: top;
padding-right: 10px;
display: table-cell;
}
关于html - 具有流体宽度的 CSS 表格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8458239/