Question

我正在搜索2列非table布局，其行为类似于table。并在IE7中工作

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

problems

建议？

Answer 1

这就是我最终的目标

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 />");
}

Answer 2

如果您不知道内容的最大宽度，则无法使用固定宽度。

如果每行使用1个div，则无法将它们设置为一个仍然具有灵活性的宽度。

http://jsfiddle.net/Lp2un/

Answer 3

您可以使用em值而不是%指定宽度，这样它总是相对于文本大小，因此不太可能不够宽。

或者，您可以在min-中指定max-width和px，以防止布局“破坏”太多。你必须弄明白这些的实际价值。

（指您的.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。

Answer 4

我认为这就是您要找的内容，请参阅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>

两列html布局，带有拉伸到适合列

4 个答案: