1

我有一个类似的代码

<div id="container" >
     <div id="content"></div>                               
    <table id="link" cellspacing=0px; cellpadding=0px;>
    </table>    
</div>

用CSS

#contentDiv {
    width: 100%;
    height:100%;
    margin: 0;
}

#content {
    width:90%;
    height:60%;
    margin-left:20px;   
    display: inline;    
    vertical-align: left;
    z-index:40;

}
#link {
    width:30%;
    height:50%;
    margin: 0;
    margin-top:10px;
    margin-right:10px;
    float: right;
    z-index:70;

}

我希望它显示为 在此处输入图像描述

没有绝对div 漂浮在桌子上

但它没有像这样显示任何帮助表示赞赏？

4

4 回答 4

1

使用浮动 div，但left-margin将 div 设为负数，使其“浮动”在表格上方

于 2013-09-26T12:49:05.843 回答
0

例如：

CSS：

#container {
    width: 100px;
    height: 100px;
    float: left;
    background-color: red;
}

#content {
    width: 60px;
    margin-right: -30px;
    height: 60px;
    float: right;
    background-color: green;

 }

HTML：

<div id="container">
   <div id="content"></div>
</div>

工作正常。

于 2013-09-26T12:51:25.990 回答
0

首先：您有一个container元素，但没有与之相关的 CSS 语句。而且你有一个contentDivCSS 声明，但没有相应的 HTML 元素。

第二：正如 davblayn 提到的，您可以使用负值margin-left。

#link {
    ...
    margin-right:-40px;
    ...
}

在此处查看示例（JSFiddle）。

于 2013-09-26T12:53:39.830 回答
0

如果将display每个表格元素的属性更改为block，它将强制表格回到块模式，然后一切正常。

<div style="float:right;background:red;width:200px;">This is a test.</div>
<table style="display:block;background:green;">
<tr style="display:block;">
<td style="display:block;">
This is a very long string. This string should break to the next line instead of spanning across like usual.
</td>

于 2017-07-19T00:16:13.897 回答