1

レスポンシブブログサイトに2列のレイアウトを使用しています。左側の列には、列の幅に合わせて拡大縮小された画像が使用され、右側の列には、ブログ投稿からのテキストの抜粋が含まれています。

ブラウザの幅が狭くなったときに、右側の列のテキストの段落の高さを左側の列の画像の高さと一致するように制限する方法についてのアイデアはありますか？

text-overflow：ellipsisを使用して、右側のdivのテキストのオーバーフローを処理する予定です。

下の画像の前後の例。

ブラウザのサイズ変更前後の例

これがHTMLであり、ブラウザウィンドウのサイズが縮小されたときにサイズを変更するために画像のサイズを設定するために使用したCSSです。

<div class="row blogpost">
    <div class="sevencol">
        <img src="img/greybox.png">
    </div>
    <div class="fourcol last>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
        </p>
        <a class="readMore" href="#">Read More...</a>
    </div>


.blogpost .sevencol img {
        zoom: 2;
        margin: auto;
        height: auto;
        max-height: 100%;
        width: auto;
        max-width: 100%;
        margin-top: 8px;
    }
4

3 に答える 3

0

通常、これは JavaScript で行います。

ページがレンダリングされたら、イメージ コンテナーの高さを評価し、同じ高さをキャプション コンテナーに適用します。

また、オーバーフロー効果を適用する長さの段落から「続きを読む」リンクのコンテンツを分離する必要がある場合もあります。

jQuery を使用していると仮定すると、次のようになります。

$(document).ready(function(){
   var imgHeight = $('#imageContainer').height();
   $('#caption').css('height', imgHeight);
});
于 2012-06-05T10:41:53.277 に答える
0

これを試して

http://jsfiddle.net/ZGyhr/

var h = $('img').height();
$('.fourcol').css('height',h+'px');

overfloe-y:scroll;右側のdivに設定します

于 2012-06-05T10:54:17.100 に答える
0

css を使用してブログのテキストのサイズを制限したい場合は、おそらく次のように表示サイズを固定することでこれを行うことができます-

.blogpost .last p{max-height: 300px;/*this is the height how much text you want to show up*/line-height:20px;/*set it this way that there will no cut off text*/ overflow:hidden;}

しかし、この方法を使用するべきではありません。テキストを制限するには、ブログ スクリプトからこれを試す必要があります。

于 2012-06-05T11:06:49.817 に答える