0

要素の周りにテキストをフローティングするための「従来の」フロートの使用と、さまざまな解像度に対する適応性を組み合わせようとしています。フィドル: 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の終わりより上に移動することはできません。float で相対位置を使用しようとしましたが、オフセットする高さが分からないため、-100% は機能しません。.text.text

一般的なアプローチはfloatonを使用する.textことですが、テキストが浮かび上がるのを妨げます.cover。また、関連するコンテンツをテキストの上に移動しようとしましたが、小さなウィンドウではテキストの前に表示され、望ましくありません。また、テキスト ブロックがフローティングからジャンプするように、overflowまたはdisplayプロパティとの何らかの干渉があります。.text.cover

私が得ることができる最も近いのは、で使用するposition: absoluteこと.relatedですright:0px;top:0px。これにより、必要な配置が得られますが、CSS で解決できない問題が発生します。関連するコンテンツが end of の下に表示されarticleます。

だから私は立ち往生しています。2 つのアプローチを混在させる方法はありますか? 最高の CSS サポートとレイアウトの変更は許容されます。Bootstrap CSS も利用できますが、少しは役に立ちません。

これは私が達成したいものです: ゴール

4

3 に答える 3

0

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
}
于 2013-09-09T01:01:42.187 に答える