我正在寻找一个 2 列的非 table
布局,其行为类似于 table
。并在 IE7 中工作
http://jsfiddle.net/YGb2y/
这可行,但它是一个表格,众所周知,表格不是布局的理想选择。如果必须的话,我会使用它,但我想找到一种语义上更合适的方式来做到这一点
请注意左列如何拉伸(stretch)以适应包含的内容,而右列如何占据剩余的可用空间
<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;
}
建议?
最佳答案
这就是我最终的结果
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
{
display:table;
width:100%;
}
li
{
display:table-row;
}
li div
{
display:table-cell;
}
.left
{
width:1px;
background-color:blue;
color:white;
}
.right
{
background-color:gray;
}
JS(IE7 破解)
if ($.browser.msie && $.browser.version == 7)
{
$("ul").wrapInner("<table />");
$("li").wrap("<tr />");
$("li div").wrap("<td />");
}
关于html - 两列 html 布局,带拉伸(stretch)以适合列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6951700/