Html 响应性浮动与经典浮动混乱

我试图将元素周围浮动文本的“传统”浮动用法与不同分辨率的适应性结合起来。小提琴：

：相关内容将放在
文章结尾下方

所以我被卡住了。有没有办法混合这两种方法？最高的CSS支持和对布局的任何更改都是可以接受的。也可以使用引导CSS，但一点帮助都没有

Thsi是我想要实现的目标：

…图像。。。
标题
一些长文本
相关内容
给你：


请记住，这在Chrome上看起来不错，但在Firefox中不行，因为
img
元素需要
display:block。可能需要进行一些较小的其他调整

HTML:

HTML的结构方式存在的问题是，这种设计在响应性方面极为有限。如果您能够更改HTML，则可以使页面具有真正的响应性。
下面是一个示例，说明如何更改HTML和CSS以生成响应性良好的布局。我在HTML中添加了更多的段落，这样就很容易看到文本的数量不会影响图像的位置。也许这里最大的警告是，
figcaption
相对于
图
（我猜这与标准对这些元素的默认样式表的定义有关），呈现得非常奇怪，因此除非这在将来可能发生变化，您需要在图形下方指定足够的边距以包含标题




HTML:

你能画一幅你想要达到的目标吗？我尝试使用
位置：绝对；右：0；排名：0.related
类上的code>，但这似乎会导致
部分
元素与
h1
标题重叠。当然这不是你想要的吗？@JakeJordan抱歉，在
.row
上还应该有一个
位置：relative
，以使绝对定位按计划工作。@JakeJordan更新了问题，提供了图片。这样可以清除浮动。我想保持
.cover
浮动，这样下面的文本就会在它周围流动。这感觉像是某种魔法：）不幸的是，您仍然依赖于文本高度。我刚刚添加了更多的文本，相关的
：更清楚地说：我使用媒体查询进行改编，这个例子已经是最大宽度查询下的布局。您打算如何更改布局以获得更好的响应？我将添加一个单独的答案，以便您的评论对上述答案仍然有意义。对未来的人来说，能够看到我们通向别处的道路可能很重要。我尝试将相关内容移到文本上方，但在较小的窗口中，它出现在文本之前，就像您的解决方案一样。这就是我将相关内容移到文本下方的原因。请您提交另一张图片，说明您希望响应布局的外观，这次是一个较小的窗口。如下所示：。我只是不想强调它，除了它对在文本下面放置相关内容施加了限制。在媒体查询中输入指定最大宽度的实际样式。然后，您需要在媒体查询中添加一些其他样式。看看你需要做什么。如果您对媒体查询需要更改的内容有疑问，请告诉我，我将为您指出具体内容：）就像任何绝对定位解决方案一样，此解决方案也有其缺点：它与其他所有解决方案重叠；e、 g.：。不过，我会接受你的回答，因为我没有提到布局的外部环境。
<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>

<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>

<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>

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
}

<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>

* {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
}