兩列的HTML佈局與拉伸到適合列

我在尋找2列非table佈局，行爲像一個table。並在IE7中工作兩列的HTML佈局與拉伸到適合列

http://jsfiddle.net/YGb2y/
這個工程，但它是一個表，並且我們都知道，表不是佈局的理想選擇。我會用它，如果我必須，但我想找到一個更多的語義上適當的方式來做到這一點

table 請注意左列如何適應包含內容，右列佔用了的可用空間

<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 /立/格，但我可以設置一個固定的寬度或百分比左列。沒有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; 
}

problems

建議？

來源

2011-08-05 kenwarner

這是我結束了

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破解）

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

來源

2011-08-07 23:31:03 kenwarner

如果您不知道內容的最大寬度，則不能使用固定寬度。

如果您使用每行1 div，則無法將它們設爲一個仍然靈活的寬度，無w/o javascript。

http://jsfiddle.net/Lp2un/

來源

2011-08-05 07:58:07 Michael

這樣的作品，但UL /李更語義正確 - 我想找到一個使用，如果可能的 – kenwarner

這是一個解決方案不是一個好的解決方案，請參閱這個稍微修改過的小提琴：[http://jsfiddle.net/Lp2un/1/](http://jsfiddle.net/Lp2un/1/），其中更多行添加到右列。 – NGLN

你可以指定一個em值，而不是%寬度，這樣，它永遠是相對於文字大小，因而不太可能不夠寬。

或者，您可以在px中指定min-和max-width以防止佈局過分「破裂」。這些你必須弄清楚你自己的實際值。

（指你.left CSS規則）

.left { 
    float:left; 
    width:15em; /* or any other value that you consider wide enough */ 
    background-color:blue; 
    color:white; 
}

或者

.left 
{ 
    float:left; 
    width:20%; 
    min-width: 125px; /* whatever suits your needs */ 
    max-width: 150px; /* whatever suits your needs */ 
    background-color:blue; 
    color:white; 
}

另外一個替代方案是太讓你的div像一個表，而實際上是一個表

參見： http://www.quirksmode.org/css/display.html#table想了解更多關於這個想法的信息。

來源

2011-08-06 13:23:37 Willem

表中，錶行，表格單元格可以，但我需要支持IE7 :( – kenwarner

我認爲這是你正在尋找，請參閱updated demo fiddle。

CSS：

#wrapper { 
    overflow: hidden; 
} 
#sidebar { 
    float: left; 
} 
#content { 
    overflow: hidden; 
}

HTML：

<div id="wrapper"> 
    <div id="sidebar"> 

    </div> 
    <div id="content"> 

    </div> 
</div>

來源

2011-08-06 14:21:55 NGLN

兩列的HTML佈局與拉伸到適合列

回答

相關問題