Jak zawijać jeden element tekstowy wokół innego, który występuje jako rodzeństwo w DOM?

Przypuśćmy mam to HTML:Jak zawijać jeden element tekstowy wokół innego, który występuje jako rodzeństwo w DOM?

<div id="a"> 
    a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa 
    a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa 
    a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa 
</div> 
<div id="b"> 
    b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb 
</div>

za pomocą CSS, jak mogę owinąć wokół div div A B takie, że mogę uzyskać efekt takiego poniżej?

wrapping text divs

od wszystkich, że próbowałem i wszystko, co czytałem, nie jestem nawet pewien, czy coś takiego jest możliwe. Pływaki z marginesami ujemnymi po prostu nakładają się zamiast oblewania, a każda próba pozycjonowania bezwzględnego spowodowałaby wyodrębnienie elementu B z przepływu, a więc również jego zawijanie.

Chcę, aby div A podążał za div B jako rodzeństwo, dzięki czemu treść wyświetla się po prostu na telefonach komórkowych lub czytnikach ekranu. Właśnie dlatego div B nie jest dzieckiem z div A.

Bez użycia elementu div B z JavaScriptem, czy istnieje jakiś skrót CSS, który może osiągnąć ten efekt. Jedyne, co mogę wymyślić, to umieszczenie pustego, przestrzennego div wewnątrz div A, a następnie przesunięcie div B, aby było "na wierzchu" tego. Czy jest to ważna technika, czy ja po prostu proszę o kłopoty w różnych rozmiarach przeglądarki przeglądarki?

Źródło

2013-04-10 yukondude

O ile mi wiadomo, nie jest to możliwe. Próbowałem zrobić to samo z obrazem, ale nigdy nie mogłem dostać tekstu pod nim tak, jak chcesz, a nawet wtedy obraz był dzieckiem divA, a nie rodzeństwem. – invertedSpear

Jeśli "div.b", gdzie znane wymiary, może być kilka opcji. Moja pierwsza skłonność to użycie JavaScript/jQuery i zmiana położenia 'div', ale gdzie w' div.a'? CSS nie może rozpoznać, gdzie "środek" treści jest ... –

Wszyscy wydają się zgodni, że tego rodzaju rzeczy nie da się zrobić samemu CSS. Przygotowałem więc krótkie (wymyślne) rozwiązanie za pomocą jQuery na wypadek, gdyby było pomocne każdemu. Można również zobaczyć wyniki w http://jsfiddle.net/qadJB/

<!DOCTYPE html> 
<html> 
    <body> 
    <div id="a"> 
     a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa 
     <div id="b-box"></div> 
     a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa 
     a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa 
    </div> 
    <div id="b"> 
     b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb 
    </div> 
    <style> 
     div { font-family: consolas; } 
     #a { margin-left: 5em; width: 18em; } 
     #b-box { border: 1px solid #eee; float: left; height: 3.25em; width: 10em; margin: 0.5em; margin-left: -4em; } 
    </style> 
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
     $(function() { 
     var boxPos = $('#b-box').offset(); 

     $('#b') 
      .css('position', 'absolute') 
      .width($('#b-box').width()) 
      .css('top', boxPos.top + 'px') 
      .css('left', boxPos.left + 'px'); 
     }); 
    </script> 
    </body> 
</html>

EDIT: Aby zachować rzeczy proste, pominąłem kod ukrywanie div Box-B i nie ruszając div B dla małych ekranów. Chciałbym użyć zapytania mediów CSS, aby ukryć div B-Box, a kiedy jest ukryty, kod jQuery nie zrobiłby nic z div B.

Źródło

2013-04-12 17:08:43 yukondude

Tak jak wspomniałeś, utwórz pudełko na "b", tak aby "a" mogło owinąć się spławem.

Źródło

2013-04-11 20:05:22 simpleb

Aby odpowiedzieć na pytanie, czy można to zrobić za pomocą css, odpowiedź brzmi: nie. Ale na pewno można to zrobić za pomocą jQuery i css. JQuery zajmie się różnymi rozmiarami widocznych ramek, itp.

Źródło

2013-04-11 20:34:27 chongo2002

Jak zawijać jeden element tekstowy wokół innego, który występuje jako rodzeństwo w DOM?

Odpowiedz

Powiązane problemy