我想用<div>
和<span>
创建一些“表行”。(为什么不使用实际的表行?因为我想使用awesomejquery corner plugin在每一个表行上设置圆角,而它似乎不喜欢表行。)
我想要三个单元格行,左边和右边的单元格是固定宽度的,中间的单元格是流体宽度的,文本应该在其中换行。
[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>
中心文本不换行,向下推到下一行。
有人能给我建议吗?
最佳答案
试试这个:
<style>
.table-row {
display: table-row;
}
.cell1, .cell2, .cell3 {
display: table-cell;
}
.cell1, .cell3 {
width: 200px;
}
</style>
关于html - 带有div和span的“faking”表行?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4615348/