两列html版式与拉伸到适合列 [英] Two column html layout with stretch-to-fit column

问题描述

我在寻找2行非 c> table 布局，其行为像表。并在IE7中工作

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; 
宽度：100％; 
} 
 li 
 {
 clear：both; 
职位：亲属; 
 overflow：hidden; 
} 
 li div 
 {
 padding：5px; 
} 
 .left 
 {
 float：left; 
 width：20％; 
 background-color：blue; 
颜色：白色; 
} 
 .right 
 {
 background-color：grey; 
} 
  

建议？

解决方案

这就是我最后的结局

http://jsfiddle.net/cj6PR/4/

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; 
宽度：100％; 
} 
 li 
 {
 display：table-row; 
} 
 li div 
 {
 display：table-cell; 
} 
 .left 
 {
 width：1px; 
 background-color：blue; 
颜色：白色; 
} 
 .right 
 {
 background-color：grey; 
 
  

JS（IE7破解版）

  if（$ .browser.msie&& $ .browser.version == 7）
 {
 $（ul）。wrapInner （< table />）; 
 $（li）。wrap（< tr />）; 
 $（li div）。wrap（< td />）; 
} 
  

I am in search of a 2 column non-table layout that behaves like a table. and works in IE7

http://jsfiddle.net/YGb2y/
this works but it's a table and as we all know, tables are not the ideal option of layouts. I'll use it if I have to, but I'd like to find a more semantically appropriate way to do this

note how the left column stretches to fit the containing content, and the right column takes up the rest of the available space

<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;
}

I tried to change this to use ul/li/div but I can either set a fixed width or percentage left column. There's no 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;
}

Suggestions?

解决方案

This is what I ended up going with

http://jsfiddle.net/cj6PR/4/

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 hack)

if ($.browser.msie && $.browser.version == 7)
{
    $("ul").wrapInner("<table />");
    $("li").wrap("<tr />");
    $("li div").wrap("<td />");
}

这篇关于两列html版式与拉伸到适合列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！