代码之家 › 专栏 › 技术社区 › Laramie

CSS布局-使表格单元格内容显示在下面的行中,并设置父行/单元格的高度

layout css

Laramie · 技术社区 · 16 年前

我正在修改ckedit组件的外观,以便除非单击,否则工具栏是隐藏的。为此,我使用position:relative和top:18px将工具栏折叠器移动到它下面的行。

我的目标是让锚元素的父级tr的高度为2px,但锚保持在11px。这有可能吗?我不能改变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 回复 | 直到 13 年前

mVChr 16 年前

集合 position:relative 上 <table> 在儿童中相对于它做绝对定位。然后添加 position:absolute 上 <a class="below"> 并调整 top 和 left 随你的便。( see example )

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 ( see updated example )

edl 16 年前

尝试设置。下面到 position:absolute 而不是 relative 然后添加 left:69px (工作台宽度-锚定宽度)。

编辑

  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>

Brian Webster Jason 13 年前

@ckeditor,可以将工具栏设置为“启动隐藏”,如下所示:

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

希望有帮助:)