Отзывчивые поплавки с классическими поплавками

Question

Я пытаюсь использовать «традиционное» использование float для плавающего текста вокруг элемента с некоторой adataptiveness для разных разрешений. Fiddle: http://jsfiddle.net/jDTBs/5/

<article> 
    <header> 
     <div class="cover">...image...</div>   
     <h1>title</h1> 
    </header> 
    <div class="row"> 
     <div class="text">some long text</div> 
     <section class="related">related content</section> 
    </div> 
</article> 

Оперативность здесь приходит в аромате перемещения связанных с содержанием под текстом. В настоящее время .related не может двигаться выше конца .text, потому что .text находится в нормальном режиме. Я попытался использовать относительное позиционирование на float, но я не знаю высоты, чтобы компенсировать его, поэтому -100% не работает.

Общий подход заключается в использовании float по адресу .text, но он мешает перемещению текста вокруг .cover. Я также попытался перемещать связанный контент над текстом, но затем в меньшем окне он появляется перед текстом, что нежелательно. Кроме того, любые помехи в overflow или display свойствах в .text делают текстовый блок отскакивающим от плавающего .cover.

Ближайший я мог бы использовать position: absolute на .related с right:0px;top:0px. Это дает позиционирование, которое я хочу, но производит CSS-unsolvable problem: связанный контент будет идти ниже конца article.

Так что я застрял. Есть ли способ смешать два подхода? Приемлемая поддержка CSS и любые изменения в макете приемлемы. Bootstrap CSS также доступен, но не помогает немного.

Thsi то, что я хотел бы достичь:

Answer 1

Вот пример того, как можно изменить HTML и CSS, чтобы получить красиво реагирующий макет. Я добавил несколько абзацев в HTML, так что легко видеть, что количество текста не влияет на позицию изображения. Возможно, самая большая оговорка здесь в том, что figcaption визуализируется очень странно по отношению к figure (я предполагаю, что это имеет какое-то отношение к определению стандарта стилей по умолчанию для этих элементов), поэтому, если это не изменится в будущем, Вам нужно указать достаточный запас под цифрой, чтобы охватить подпись.

http://jsfiddle.net/jjordanca/jDTBs/10/

HTML:

<article> 
    <figure class="cover"> 
     <img src="" alt="" /> 
     <time datetime="2013-08">Aug 2013</time> 
    </figure> 
    <header> 
     <h1>Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche</h1> 
    </header> 
    <div class="row"> 
     <figure class="related"> 
      <img src="" alt="" /> 
      <figcaption>Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.</figcaption> 
     </figure>   
     <div class="text"> 
      <p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p> 
      <p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p> 
      <p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p> 
      <p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p> 
     </div> 
    </div> 
</article> 

CSS:

* {padding: 0; margin: 0;} 
article { 
    position: relative; 
} 
img { 
    border: 1px solid black; 
} 
.cover { 
    width: 80px; 
    text-align: center; 
    font-size: 0.8em; 
    display: inline-block; 
    float: left; 
    margin: 0 20px 10px 0; 
} 
time { 
    display: inline-block; 
    width: 80px; 
    text-align: center; 
} 
header { 
    margin: 20px 0 0 0; 
} 
h1 { 
    position: relative; 
    padding-left: 10px; 
    font-size: 1.6em; 
} 
.cover img { 
    width: 80px; 
    height: 120px; 
} 
.row { 
    display: inline; 
    position: relative; 
} 
.text { 
    display: inline; 
    position: relative; 
    font-size: smaller; 
} 
.related { 
    display: inline-block; 
    width: 200px; 
    font-size: 0.8em; 
    height: 100px; 
    float: right; 
    margin: 25px 0 50px 20px; 
} 
.figcaption { 
    display: inline-block; 
    float: right; 
} 
.related img { 
    width: 200px; 
    height: 100px; 
} 
* { 
    border: 1px dotted #ccc 
} 

Answer 2

<article> 
    <header> 
     <div class="cover">...image...</div>   
     <h1>title</h1> 
    </header> 
    <div style="clear:both"></div> 
    <div class="row"> 
     <div style="float:left" class="text">some long text</div> 
     <section class="related">related content</section> 
    </div> 
    <div style="clear:both"></div> 
</article> 

Answer 3

Здесь вы идете:

http://jsfiddle.net/jjordanca/jDTBs/8/

Имейте в виду, что это будет выглядеть хорошо на Chrome, но не в Firefox, так как элементы img потребуют display: block; в CSS. Возможно, потребуется внести некоторые незначительные корректировки.

HTML:

<article> 
    <header> 
     <div class="cover"> 
      <img src="" alt="" /> 
      <time datetime="2013-08">Aug 2013</time> 
     </div> 
     <h1>Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche</h1> 
    </header> 
    <div class="row"> 
     <div class="text"> 
      <p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p> 
      <p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p> 
     </div> 
     <section class="related"> 
      <figure> 
       <img src="" alt="" /> 
       <figcaption>Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.</figcaption> 
      </figure> 
     </section> 
    </div> 
</article> 

CSS:

article { 
    position: relative; 
    max-width: 480px; 
} 
figure { 
    margin: 0em 
} 
img { 
    border: 1px solid 
} 
.cover { 
    width: 80px; 
    text-align: center; 
    font-size: 0.8em; 
} 
.cover { 
    display: inline-block; 
    margin: 0em 2em 1em 0em; 
} 
time { 
    display: inline-block; 
    width: 80px; 
    text-align: center; 
} 
header { 
    display: inline-block; 
    width: 100px; 
    float: left; 
} 
h1 { 
    position: relative; 
    width: 550px; 
    margin-top: -180px; 
    top: 50px; 
    margin-left: 90px; 
    padding-left: 10px; 
    font-size: 1.6em; 
} 
.cover img { 
    width: 80px; 
    height: 120px; 
} 
.row { 
    display: inline; 
    position: relative; 
    top: 110px; 
} 
.text { 
    display: inline; 
    position: relative; 
    font-size: smaller; 
} 
.related { 
    width: 200px; 
    font-size: 0.8em; 
    height: 100px; 
    float: right; 
    position: relative; 
    left: 220px; 
    top: -200px; 
} 
.related img { 
    width: 200px; 
    height: 100px; 
} 
* { 
    border: 1px dotted #ccc 
} 

Проблема с тем, как HTML структурирована является то, что эта конструкция крайне ограничена в своей отзывчивости. Если вы можете изменить HTML, страница может быть действительно отзывчивой.