Display:table-строка CSS не расширяется, когда ширина установлена на 100%
У меня есть определенная проблема. Я использую FireFox 3.6 и имею следующую структуру DOM:
Type
Name
И следующий CSS:
.view-row {
width:100%;
display:table-row;
}
.view-name {
display: table-cell;
float:right;
}
.view-type {
display: table-cell;
}
Если я взлетаю display:table-row это появится правильно, с view-row проявление ширины 100%. Если я поместил его назад, это уменьшается вниз. Я поднял это на Мусорном ведре JS:
Что продолжается?
2 ответа
Если вы используете display: table-row и т. Д., То вам нужна правильная разметка, которая включает в себя содержащую таблицу. Без него ваш исходный вопрос в основном дает эквивалентную плохую разметку:
<tr style="width:100%">
<td>Type</td>
<td style="float:right">Name</td>
</tr>
Где приведенная выше таблица? Вы не можете просто создать строку из ниоткуда (tr должен содержаться в таблице , thead , tbody и т. Д.)
Вместо этого, добавить внешний элемент с помощью display: table , установить 100% ширину содержащего элемента. Две внутренние ячейки автоматически перейдут в положение 50/50 и выровняют текст по второй ячейке. Забудьте о float с элементами таблицы. Это вызовет столько головных болей.
разметка:
<div class="view-table">
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
</div>
CSS:
.view-table
{
display:table;
width:100%;
}
.view-row,
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.view-name
{
text-align:right;
}
укажите .view-type class float: left; или удалите float: right; из .view-name
edit: Оберните свой div и установите следующий css: Вы должны использовать структуру таблицы для правильных результатов. .table {
display:table;
width:100%;}