html - 响应式花车与经典花车混为一谈

Question

我正在尝试将元素周围 float 文本的“传统” float 用法与针对不同分辨率的一些数据适应性混合使用。 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% 不起作用。

常用方法是在.text 上使用float，但它会干扰.cover 周围的文本 float 。我还尝试将相关内容移动到文本上方，但在较小的窗口中它出现在文本之前，这是不希望的。此外，任何对 .text 中的 overflow 或 display 属性的干扰都会使文本 block 跳离 float .cover.

我最接近的是在 .related 上使用 position: absolute 和 right:0px;top:0px。这给出了我想要的定位，但产生了 CSS-unsolvable problem : 相关内容将放在 article 结尾处。

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

这是我想要实现的目标:

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
}