2

私はこれらの線に沿っていくつかの基本的なマークアップを持っています：

<div class="page_content">
    <p>A paragraph of text.</p>
    <p>Another paragraph of text.</p>
    <img src="image.jpg" />
    <p>Some more text.</p> 
</div>

段落のサイズは制限されています.page_content p{min-width:24em;max-width:36em}。レスポンシブレイアウトを目指しています。

ブラウザの幅が広い場合は、テキストのメインフローから画像を移動して、これらの線に沿ったレイアウトを実現したいと思います（上のhtmlのnb画像は下に示す位置と一致しない場合があります！）：

    ======画像

    --------
    --------
    --------

    -------- ======
    -------- ======
    -------- ======
    --------

    --------
    --------
    --------

私float:rightが画像の場合、それらはテキストからすくい取り、その上端は「親」の段落と一致します。ただし、ページの右側に揃えられています。私は、彼らが座っている段落の右側にそれらを平らに保つ方法を見つけることができないようです。

画像をメインのpage_contentdivの外に移動したくないのは、画面の幅が小さい場合、画像をテキストと同じ「列」に表示したいからです。レスポンシブデザインです。

これをどのように達成できるかについてのアイデアはありますか？出来ますか？私は数時間遊んでいましたが、賢明ではありません！

4

1 に答える 1

2

私はこれに沿って何かをします: http://jsfiddle.net/RjDaS/16/

すべての paragraf タグを div でラップし (これにはセクションと呼ばれるクラスがあります)、その横に画像を配置します。これは、レスポンシブ デザインでも機能します。しかし、あなたの画像を page_content div に残すことができませんでした。

<div class="page_content">
    <p>A paragraph of text.</p>
    <div class="Section">
        <p>Another paragraph of text.</p>
        <img src="image.jpg" />
    </div >
    <p>Some more text.</p> 

</div>

</p>

CSS:

.Section p{

    float:left;
    /*min-width:24em;*/
    max-width:36em;
        margin-right:10px;
}
.Section img{
    float:left;
}
.Section{
    overflow:hidden;
}
​
​

編集: float left を追加して、p タグの近くに留まるようにしました。(見やすくするために最小幅を削除)

于 2012-12-17T20:33:04.147 に答える