поплавок стол по 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, но сделать left-margin из в DIV отрицательного числа, так что 'плавает' над столом

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. И у вас есть инструкция CSS contentDiv, но не соответствующий элемент 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>