我在尋找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;
}
建議？