Question

我试图使div具有相同的高度，所以我使用了显示表，我有的问题是宽度会增长。例如，尝试在tableright中添加内容，当超出宽度时，它不会破坏到下一行，但会水平扩展到tableleft。

请咨询。以下是示例代码

 <div id="maintable">
    <div id="table-row">
    <div id="tableleft></div>
    <div id="tableright></div>
    </div>
    </div>

    <style>
    #maintable
    {display:table;
    width:100%;
    }
    #table-row
    {
    display:table-row
    width:100%;
    }
    #tableleft
    {
    width:60%;
    display:table-cell;
    }
    #tableright
    {
    width:40%;
    display:table-cell;
    }
    </style>

Answer 1

你在那里做了一些语法错误。

进一步确保在表格单元格中放置一个大的不间隔单词我使用了＆＃34; table-layout：fixed;＆＃34;

检查这个小提琴：http://jsfiddle.net/5q9K8/17/

HTML：

<div id="maintable">
    <div id="table-row">
        <div id="tableleft">lorem</div>
        <div id="tableright">ipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsum</div>
    </div>
</div>

Css：

#maintable
{
    display:table;
    width:100%;
    table-layout: fixed;
    word-wrap:break-word;    
}
#table-row
{
    display:table-row;
    width:100%;
}
#tableleft
{
    width:60%;
    display:table-cell;
    background: #eef;
}
#tableright
{
    width:40%;
    display:table-cell;
    background: #efe;
}

Answer 2

相应地添加宽度这里只是一个示例，显示div高度等于表高度。

CSS

.maintable {
    width:100%;
    display: table;
    border: 1px solid blue;
}

.maintable .table-row {
    display: table-row;
    border: 2px solid black;
}

.maintable .table-row .tableleft, .maintable .table-row .tableright {
    display: table-cell;
    border: 4px solid red;
}

.tableright {
    width: 60%;
}
.tableleft {
    width: 40%;
}

<强> DEMO

Final DEMO

显示表行宽不固定

2 个答案: