在div中的div上浮动表

Question

我有像

这样的代码

<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 floating over table

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

Answer 1

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

Answer 2

例如：

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>

工作正常。

Answer 3

首先：你有一个container元素，但没有绑定它的CSS语句。你有一个contentDiv CSS语句，但没有相应的HTML元素。

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

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

See an example here (JSFiddle)

Answer 4

如果将每个表元素的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>