Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как привязать innerHTML к диву с position relative? (https://javascript.ru/forum/xhtml-html-css/54363-kak-privyazat-innerhtml-k-divu-s-position-relative.html)

nuboquest 14.03.2015 16:26

Как привязать innerHTML к диву с position relative?
 
Сабж. У меня че-то уходит вниз страницы. Пробовал вставлять внутрь спаны, дивы, параграфы, все то же самое.

вот простой пример
<html>
<head>
<style>
 body{background: grey}
 .w{float:left; background: blue; height: 100px; width: 50px}
 .d{
   position: relative;
   border: 5px solid black;
   height: 40px; width: 40px;
}
 
</style>
</head>
<body>

<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="d"></div>
<div class="d">foo</div>
<div class="d"></div>
<div class="d"></div>

</body>
</html>


jsfiddle:

https://jsfiddle.net/w2nw3743/

danik.js 14.03.2015 20:16

.d{clear:both}


Вот что у тебя происходит, только упрощенно:

<!DOCTYPE html>
<style>
.floated{
    float: left;
    background: blue;
    width: 100px;
    height: 100px;
    opacity: 0.5;
}
.reqular{
    background: red;
}
</style>

<div class="floated"></div>
<div class="reqular">abc cde<br>efg</div>


Таким образом, floated блоки не влияют на позиционирование других блоков, но при этом смещают их содержимое.


Часовой пояс GMT +3, время: 01:26.