"伪造"表格行与divs和跨度？ [英] "Faking" table rows with divs and spans?
问题描述
我想用< div> 和< span> 创建一些表格行 。 （为什么不使用真正的表格行？因为我想使用真棒 jquery corner插件，它似乎不喜欢表格行。）
我想要三单元行，LH和RH单元格的宽度固定，流体宽度的中心单元，文本应该包裹在其中。
[fixedwidth] [wrapwrapwrapwrap] [fixedwidth]
[fixedwave] [wrapwrapwrapwrapwrapwrapwr] [fixedwidth]
apwrapwrapwrapwrapwrapwr
[fixedwave] [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>标题< / span>
< span class =cell2> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。如果你想让你的工作变得轻松愉快，那么你的工作就会变得非常简单。< / span>
< span class =cell3>可用< / span>
< / div>
< / body>
< / html>
中央文字不会换行，并且会推到下一行。
请问任何人都可以提供建议吗？ 试试这个：
< style>
.table-row {
display：table-row;
}
.cell1，.cell2，.cell3 {
display：table-cell;
}
.cell1，.cell3 {
width：200px;
}
< / style>
I'd like to create some "table rows" using <div> and <span>. (Why not use actual table rows? Because I want to set rounded corners on each table row using the awesome jquery corner plugin, and it doesn't seem to like table rows.)
I'd like three-cell rows, with LH and RH cells of fixed width, and a central cell of fluid width, in which the text should wrap.
[fixedwidth][wrapwrapwrapwrap ][fixedwidth]
[fixedwidth][wrapwrapwrapwrapwrapwrapwr][fixedwidth]
apwrapwrapwrapwrapwrapwr
[fixedwidth][wrapwrapwrapwrap ][fixedwidth]
This is what I have so far, but it's disastrously wrong:
<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>
The central text doesn't wrap, and pushes down onto the next line.
Please could anyone advise?
Try this:
<style>
.table-row {
display: table-row;
}
.cell1, .cell2, .cell3 {
display: table-cell;
}
.cell1, .cell3 {
width: 200px;
}
</style>
这篇关于"伪造"表格行与divs和跨度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
