CSS Layout - отображение содержимого ячейки таблицы в строке ниже и установка высоты родительской строки / ячейки - PullRequest
Новая
       13

CSS Layout - отображение содержимого ячейки таблицы в строке ниже и установка высоты родительской строки / ячейки

1 голос
/ 03 июня 2010

Я изменяю обложку для компонента CKEdit, чтобы панель инструментов была скрыта, если не щелкнуть. Для этого я переместил сворачиватель панели инструментов в строку под ним, указав позиции: относительные и верхние: 18 пикселей.

Моя цель состоит в том, чтобы родительский элемент tr элемента привязки имел высоту 2 пикселя, но оставил привязку на уровне 11 пикселей. Это возможно? Я не могу изменить DOM, только стили.

Вот мой сокращенный код 

<style type="text/css">
    table { width: 80px;}
    td { border: solid 1px #ccc; }
    .header  
    {
        background-color: #99f;
        /* This is being ignored */
        height:2px; 
        }
    .below 
    {
        float: right; 
        position: relative;
        top: 18px;
        /*If I shrink,  the BG image goes Away*/
        height: 11px;
        width: 11px;
        background-image: url('http://ckeditor.com/apps/ckeditor/3.3/skins/kama/images/sprites.png');
        background-position: 4px -1387px;
        border: 1px outset #D3D3D3;
    }
    .hidden { display:none; }

</style>

<table>
<tr><td class="header"><a class="below"><span class="hidden">#</span></a></td></tr>
<tr><td>next row</td></tr>
</table>

Я пересылаю новый код в соответствии с предложениями ниже. Теперь показывает стрелку в правом верхнем углу страницы 

<style type="text/css">
    table { width: 80px; position:relative;}
    td { border: solid 1px #ccc; }
    .header  
    {
        position: relative;
        background-color: #99f;
        /* This is being ignored */
        height:2px; 
        }
    .below 
    {
        float: right; 
        position: absolute;
        top: 6px;
        right: 2px;
        /*If I shrink,  the BG image goes Away*/
        height: 11px;
        width: 11px;
        background-image: url('http://ckeditor.com/apps/ckeditor/3.3/skins/kama/images/sprites.png');
        background-position: 4px -1387px;
        border: 1px outset #D3D3D3;
    }
    .hidden { display:none; }

</style>

<br /><br /><br /><br /><br /><br />
<table>
<tr><td class="header"><a class="below"><span class="hidden">#</span></a></td></tr>
<tr><td>next row</td></tr>
</table>

Редактировать (за комментарии):
Если я добавлю относительно расположенный элемент div между якорем и ячейкой, я смогу добиться результатов, но опять же, я не могу изменить DOM. 

<td class="header">
<div style="position:relative; ">
    <a class="below"><span class="hidden">#</span></a>
</div>
</td>

Ответы [ 3 ]

3 голосов
/ 03 июня 2010

Установите position:relative на <table>, чтобы сделать абсолютное позиционирование у детей относительно него. Затем добавьте position:absolute на <a class="below"> и настройте top и left по своему вкусу. ( см. Пример ) 

table { display:block; position:relative; width:80px; }
.header { width:80px; }
.below {
  float: right; 
  position: absolute;
  top: 6px; right:2px; // adjust as needed
}

С позицией <a> можно свободно изменять родительскую высоту <td>, как если бы она не содержала .below

РЕДАКТИРОВАТЬ: для работы в FF необходимо добавить display:block в таблицу и дублировать width в .header ( см. Обновленный пример )

1 голос
/ 03 июня 2010

Попробуйте установить. Ниже position:absolute вместо relative, затем добавьте left:69px (ширина таблицы - ширина привязки).

EDIT 

  td { border: solid 1px #ccc; }
.header  
{
    background-color: #99f;
    /* This is being ignored */
    height:2px; 
    position:relative;

    }
.below 
{
    float: right; 
    position: absolute;
    top: 18px;
    left:69px;
    /*If I shrink,  the BG image goes Away*/
    height: 11px;
    width: 11px;
    background-image: url('http://ckeditor.com/apps/ckeditor/3.3/skins/kama/images/sprites.png');
    background-position: 4px -1387px;
    border: 1px outset #D3D3D3;
}
.hidden { display:none; }
table { width: 80px; position:relative; }

и 

<table>
<tr><td class="header"><a class="below"><span class="hidden">#</span></a></td></tr>
<tr><td>next row</td></tr>
</table>
0 голосов
/ 03 июня 2010

@ CKeditor, вы можете установить панель инструментов на скрытый запуск, например: 

CKEDITOR.replace( 'editor1', {toolbarStartupExpanded : false} );

Надеюсь, это поможет:)

...