1

私が取り組んでいるサイトでは、長い記事が画面に表示されます。サイトはレスポンシブなので、画面に表示されるものはすべて、さまざまな画面に対応するようにサイズ変更および再フローされます。以前は、記事が左側のフローティング div にある 2 列のレイアウトがありました。短いコンテンツのサイドバーは、右側のフローティング div になります。

右側のコンテンツが非常に短いため、その下に無駄な空白がたくさんあると判断されました。テキストが回り込むように、右側の列を左側の div に組み込むように依頼されました。

その部分は非常に簡単で、現在埋め込まれている右側の列を記事にフロートさせ、書かれたテキストをその周りに巻き付けるだけでした。

この JSFiddle を参照してください: http://jsfiddle.net/TheMonkxx/2aucA/1/

ページの HTML は次のとおりです。

<div class="parent">
<div class="right_content" align="right"></div>

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas vitae nunc arcu. Cras tortor velit, consectetur
quis consectetur vel, ultrices eu nisl. Pellentesque convallis orci ligula,
id pharetra mauris. Vestibulum eleifend, turpis eget commodo dapibus, diam

magna nunc auctor elit, nec molestie libero quam quis mi. Donec interdum
velit non arcu sollicitudin eu ullamcorper lectus venenatis. Vivamus at
lacus magna. Proin in diam semper urna fermentum molestie sit amet sit
amet augue. Nulla sit amet massa eu risus laoreet laoreet eget sed erat.
Aliquam quis enim in odio porta consequat. Ut egestas urna et erat iaculis
et aliquam libero auctor.</div>

ここにCSSがあります

.parent {
 border: 1px solid green;
 width: 200px;
 float: right;
}

.right_content {
 width: 25%;
 height: 150px;
 float: right;
 background-color: red;
 margin: 0 0 7px 7px;
}

記事のコンテンツに画像を追加しようとすると、問題が発生します。サイトはレスポンシブなので、画像に max-width: 100% を適用したいと思います。ただし、これを行うと、画像は親コンテナーの 100% になり、画像の下に書き込まれたコンテンツが右側の列の後にプッシュされます。このフィドルを参照してください：

http://jsfiddle.net/TheMonkxx/2a66J/

ページの更新された HTML は次のとおりです。

<div class="parent">
<div class="right_content" align="right"></div>
<img src="http://www.thetop22.com/wp-content/uploads/2012/01/Black-Keys-Banner-3.png"
/>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas vitae nunc arcu. Cras tortor velit, consectetur
quis consectetur vel, ultrices eu nisl. Pellentesque convallis orci ligula,
id pharetra mauris. Vestibulum eleifend, turpis eget commodo dapibus, diam

magna nunc auctor elit, nec molestie libero quam quis mi. Donec interdum
velit non arcu sollicitudin eu ullamcorper lectus venenatis. Vivamus at
lacus magna. Proin in diam semper urna fermentum molestie sit amet sit
amet augue. Nulla sit amet massa eu risus laoreet laoreet eget sed erat.
Aliquam quis enim in odio porta consequat. Ut egestas urna et erat iaculis
et aliquam libero auctor.</div>

そして更新された CSS:

img {
  max-width:100%;
}
.parent {
   border: 1px solid green;
   width: 200px;
   float: right;
}
.right_content {
   width: 25%;
   height: 150px;
   float: right;
   background-color: red;
   margin: 0 0 7px 7px;
}

画像に事前定義された幅を与えると、レイアウトは修正されますが、サイトのレスポンシブな性質に問題が生じます。また、コピーのさまざまな場所に画像がある記事もいくつかあるので、画像が右側の列の横にあると常に予測できるとは限りません.

希望のレイアウトを取得し、レスポンシブな側面を維持する方法についてのアイデアや提案はありますか? ありがとう！

4

3 に答える 3

0

これを見る 1 つの方法ですが、多くの画像を扱う場合、あまり効率的ではなく、非常に肥大化します。

jsFiddle に投稿したものだけで作業する必要がある場合は、上記の記事の画像の周りに追加することをお勧めします。次に、これをパーセンテージに制約し、セカンダリ クラスで左または右にフロートします。

HTML

<div class="article_image article_image_flleft"><img src="http://www.thetop22.com/wp-content/uploads/2012/01/Black-Keys-Banner-3.png"
/></div>

CSS

.article_image{
 width: 50%;
}
.article_image_flleft{
 float: left;
}

フィドル: http://jsfiddle.net/D8ELj/1/

isherwood が指摘するように、さまざまなビューポートを に設定することは、長期的にはより有益です。

于 2013-02-15T18:10:01.723 に答える
0

何らかの計算を行うためのスクリプトがなければ、小さな画像で我慢しなければならないかもしれません。

http://jsfiddle.net/2a66J/2/

img {
    max-width:72%;
    float: left;
}

技術的には、あなたのサイトは「レスポンシブ」ではありません。それは「液体」です。応答性が高い場合は、ビューポート サイズに基づいて固定の最大幅を設定し、すべてのシナリオで 100% の画像幅にすることができます。マイナーな欠点は、通常、レスポンシブ デザインのページで使用可能なビューポート幅を 100% 使用していないことです。

于 2013-02-15T17:25:45.380 に答える