我在寻找2列非table布局，行为像一个table。并在IE7中工作两列的HTML布局与拉伸到适合列
http://jsfiddle.net/YGb2y/
这个工程，但它是一个表，并且我们都知道，表不是布局的理想选择。我会用它，如果我必须，但我想找到一个更多的语义上适当的方式来做到这一点
请注意左列如何适应包含内容，右列占用了的可用空间
| 12345 | ... |
| 123456 | ... |
| 1234567 | ... |
| 12345678 | ... |
| 123456789 | ... |
| 1234567890 | ... |
table
{
width:100%;
}
.left
{
width:1px;
background-color:blue;
color:white;
}
.right
{
background-color:gray;
}
的其余我试图改变此使用UL /立/格，但我可以设置一个固定的宽度或百分比左列。没有width:stretch-to-fit。
http://jsfiddle.net/cj6PR/
HTML
- 12345 ...
- 123456 ...
- 1234567 ...
- 12345678 ...
- 123456789 ...
- 1234567890 ...
CSS
ul
{
list-style:none;
width:100%;
}
li
{
clear:both;
position:relative;
overflow:hidden;
}
li div
{
padding:5px;
}
.left
{
float:left;
width:20%;
background-color:blue;
color:white;
}
.right
{
background-color:gray;
}
建议？