Я пытаюсь сделать div одинаковой высоты, поэтому я использовал таблицу отображения, проблема в том, что у меня ширина ширины будет расти. В качестве примера попробуйте добавить содержимое в tableright, когда оно будет превышено шириной, оно не будет разбиваться на следующую строку, но оно будет расширяться горизонтально к таблице.
Пожалуйста посоветуй. Ниже приведен пример кода
<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>
Вы сделали небольшую синтаксическую ошибку.
Далее, чтобы убедиться, что в табличной ячейке помещено одно большое несвязанное слово, я использовал "table-layout: fixed";
проверьте эту скрипту: 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;
}
Добавьте ширину, как здесь, здесь просто пример, чтобы показать высоту 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%;
}