我正在寻找一种类似于表格的2列非表格布局,并且可以在IE7中正常工作。http://jsfiddle.net/YGb2y/这个例子虽然可行,但它使用了表格布局,而我们都知道,表格不是理想的布局选项。如果必须使用,我会采用它,但我希望能找到更符合语义的方法来实现这个布局。请注意左列如何拉伸以适应包含内容,右列占用其余可用空间。
http://jsfiddle.net/cj6PR/
<table>
<tr><td class="left">12345</td><td class="right">...</td></tr>
<tr><td class="left">123456</td><td class="right">...</td></tr>
<tr><td class="left">1234567</td><td class="right">...</td></tr>
<tr><td class="left">12345678</td><td class="right">...</td></tr>
<tr><td class="left">123456789</td><td class="right">...</td></tr>
<tr><td class="left">1234567890</td><td class="right">...</td></tr>
</table>
table
{
width:100%;
}
.left
{
width:1px;
background-color:blue;
color:white;
}
.right
{
background-color:gray;
}
我试图改用ul/li/div来实现,但是我要么只能设置一个固定宽度,要么只能设置百分比的左侧栏。没有“width: stretch-to-fit”。
http://jsfiddle.net/cj6PR/
HTML
<ul>
<li><div class="left">12345</div><div class="right">...</div></li>
<li><div class="left">123456</div><div class="right">...</div></li>
<li><div class="left">1234567</div><div class="right">...</div></li>
<li><div class="left">12345678</div><div class="right">...</div></li>
<li><div class="left">123456789</div><div class="right">...</div></li>
<li><div class="left">1234567890</div><div class="right">...</div></li>
</ul>
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;
}
有什么建议吗?