我正在尝试寻找一种解决方案,以在我们的应用程序中布局表格(从Silverlight移植)。我们喜欢标签,试图在没有表的情况下做到这一点,但是表解决了一个基本问题,我不确定如何解决其他问题。
这是一个示例(plnkr):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 1.1rem;
border-bottom: 1px solid #ccc;
}
td {
vertical-align: top;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan='2'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>
label:
<div>(This label is extra</div>
<div>tall because of these</div>
<div> extra lines.)</div>
</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>this is the longest label:</td>
<td><input placeholder='search for stuff'>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>longer label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>long label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>another label:</td>
<td>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>short label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
</table>
</body>
</html>
我们有两组“标签:输入”列表,每组都有自己的标题。最左边的列将调整为任一组中最宽标签的宽度,同时,每行也将调整为最高元素的高度。
没有表如何实现相同的行为?当人们谈论“无桌”布局时,这是否仅适用于不关心布局内容大小的事物?
最佳答案
编辑:
嗯,对不起。实际上,您每行可以执行两个以上的元素,但是(通常与float:正确)必须将它们以相反的顺序放置。
如果不必使用表,请执行以下操作:为每行添加一个div,并在它们之间放置一个不可见的水平线,以防止它们彼此堆积。另外:浮点数:左边的标签和浮点数:右边的输入框。它行得通,但是我不知道如何用三个或更多元素来做一行,例如:生于:月/日/年,工作。
无论如何,这是您的操作方法。
<!DOCTYPE=html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body {
float: left;
}
hr {
clear: both;
border: none;
}
p{
float: left;
}
form {
float: right;
}
</style>
<body>
<div id = "row_1">
<p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
<form><input type="text" placeholder="Second" /></form>
</div>
<hr />
<div id = "row_2">
<p>short</p>
<form><input type="text" placeholder="First" /></form>
</div>
</body>
</html>
关于html - 排列没有表格或列宽的列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39070139/