0

3 列のレスポンシブな流体設計ポートフォリオがあります。特定に苦労している CSS に何か問題があります。

ちょうど 3 つの項目が連続している場合、問題ないように見えます。ただし、最後の項目が 1 列または 2 列しかない行で終わる場合、書式全体が歪んでしまいます。これは、ブラウザのサイズを変更することで確認できます。

これに対する CSS の修正を特定するのを手伝っていただければ、大変感謝しています。

サンプルページはこちら: http://bit.ly/KzfN2g

これが問題の原因である主な css スタイルだと思いますが、間違っている可能性があります。

 .mosaic-block-three {
    margin-right:3%;
    width:29.3%;
    background:url("../img/progress.gif") no-repeat scroll center center #F5F5F5;
    border:1px solid #FFFFFF;
    box-shadow:0 0 4px 0 #888888;
    float:left;
    margin:10px 40px 30px 0;
    overflow:hidden;
    position:relative;
    width:291px;
}
4

2 に答える 2

0

簡単なjQueryを使用してこれを達成し、ページの読み込み時に画像の高さを取得してcssで高さを宣言し、ウィンドウのサイズ変更時に画像の高さを取得してcssで再宣言しました

$j(ドキュメント).レディ(関数() {

// Set portfolio image item height after images load, 

        $j(".mosaic-backdrop img").load(function(){
         var portfolioItemHeight =  $j(".mosaic-backdrop img").height();
         $j(".portfolio-three-item").css("height", portfolioItemHeight);
        });
// reset portfolio image item height each time window is maximized

        if(screen.width > 1200) {
            $j(".mosaic-backdrop img").load(function(){
             var portfolioItemHeight =  $j(".mosaic-backdrop img").height();
             $j(".portfolio-three-item").css("height", portfolioItemHeight);
            });

        }
// reset portfolio image item height each time window is resized

        $j(window).resize(function() {
         var portfolioItemHeightReized =    $j(".mosaic-backdrop img").height();
         $j(".portfolio-three-item").css("height", portfolioItemHeightReized);
     });

     });

@kristina childs さん、高さが適切に設定されていなかったことに気づかせてくれてありがとう！

于 2012-06-05T19:18:18.273 に答える
0

whoa, holy registered trademark batman! i would put a 

<sup>&reg;</sup>

if i were you :) but to the question at hand...

why do you have so many lists with only one item? you've also got some styles in there that aren't defined, but i think your biggest problem is that you have items within 

<li>

that are floated while the containing elements are not.

try floating .portfolio-three-item then clearing the contents within it. having floated elements inside non-floated elements (without using a clearing class or 

<br clear="all" />

confuses the browser and it doesn't look as though any of the contents need to be floated.

于 2012-06-04T23:56:43.177 に答える