0

コンテナを、幅が広すぎず、薄すぎない、あらゆる解像度に最適な方法で表示したいと思います。

  • 最大640x480の解像度で1ブロック/行。
  • 1024x768の解像度で2ブロック/行。
  • 1366x768以上の場合は3ブロック/行。
  • 解像度1680x1050以上の場合は4ブロック。

理想的には、コンテナのサイズを現在の画面幅に変更します。

は<div class="L">ループ内にあり、5〜100回表示されます。<div ID="A">スタイルはありません。

<div id="A">
...
    <div class="L V">
        <a href="#"><img src="thumb.jpg">
        <h2>short title</h2>
        medium to long description about lorem ipsum (10-500chrs)
        </a>
    </div>
...
</div>

<div class="L">他の場所でも使用されています。<div class="V">主にこのビューに使用されます。

div.L {
    border:1px;
    padding:3px;
    margin:2px;
    font-size:21px;
    text-align:justify;
}
div.V {
    width:486px;
    height:149px;
    display:inline-block;
    overflow:hidden;
    text-overflow:ellipsis;
}
div.L img {
    float:left;
    min-width:80px;
    min-height:80px;
    padding-right:4px;
}
div.V img {
    max-width:157px;
    max-height:118px;
}
div.L h2 {
    margin:1px;
    font-size:21px;
}
div.V h2 {
    white-space:nowrap;
}

問題：
説明がない場合（固定サイズ）、または単語が2つしかない場合はすべてうまく配置されるため、可変テキストと関係があるのではないかと思います。

JSフィドル： http： //jsfiddle.net/qvpuX/1/

4

2 に答える 2

1

div.Vcssを次のように変更します。

div.V { 
    width:416px; 
    height:149px; 
    float:left; 
    overflow:hidden; 
    text-overflow:ellipsis;
}

テストリンク

編集：

div次のように可変幅を追加できます。

@media all and (min-width: 400px) and (max-width: 600px){
    div.V{
        width: 416px;
    }
}
@media all and (max-width: 320px){
    div.V{
        width: 100px;
    }

}

注：width: 100px;それが機能することを示すための参照として追加しました、あなたはあなたが望むものを追加することができwidthます（300px、私はあなたのコメントから推測しています）

テストリンク-レスポンシブ

于 2012-12-18T07:42:18.827 に答える
1

セレクターにfloat: leftルールを追加するだけですdiv.V

http://codepen.io/timothyasp/pen/AFerh

フルビュー：http ：//codepen.io/timothyasp/full/AFerh

于 2012-12-18T07:39:01.220 に答える