Question

我想使用<div>和<span>创建一些“表格行”。（为什么不使用实际的表行？因为我想使用真棒jquery corner plugin在每个表行上设置圆角，并且它似乎不喜欢表行。）

我想要三个单元格的行，其中LH和RH单元格具有固定宽度，以及一个流体宽度的中心单元格，文本应该在其中包裹。

[fixedwidth][wrapwrapwrapwrap          ][fixedwidth]

[fixedwidth][wrapwrapwrapwrapwrapwrapwr][fixedwidth]
             apwrapwrapwrapwrapwrapwr

[fixedwidth][wrapwrapwrapwrap          ][fixedwidth]

这是我到目前为止所做的，但这是一个灾难性的错误：

<html> 
<head>
<style>
.table-row {
    width:100%;
}
.cell1 {
    float: left;
    width: 200px;
}
.cell2 {
    float: left;
}
.cell3 {
    float: right;
    width: 200px;
}
</style>
</head>
<body> 
<div class='table-row'>
<span class="cell1">Title</span>
<span class="cell2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
<span class="cell3">Available</span>
</div>
</body>
</html>

中心文本不会换行，然后按下到下一行。

请有人建议吗？

Answer 1

首先，浮动内联元素没有意义。其次，这不是你创建液柱的方式。

尝试以下更改：

<div class="cell1">Title</div>
<div class="cell3">Available</div>
<div class="cell2">consequat.</div>

和

.cell2 {
    margin-left: 200px;
    margin-right: 200px;
}

注意：如果您向单元格添加填充/边框/边距，请不要忘记将margin-left和margin-right的尺寸总和添加到cell2。

Answer 2

你不能只在常规表格单元格中添加div和spans吗？

编辑：

<tr>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
</tr>

使用div和spans“伪造”表格行？

3 个答案: