2

そのため、画面全体が常にいっぱいで、きれいにレイアウトされたページを作成したいと考えています。次のコードを使用すると、非常にうまく機能します。

#posts{
    width:100%;
    height:auto;
    background:#666;
}
.entry{
    float:left;
    margin-left: 4%;
    margin-top:10px;
    margin-bottom: 10px;
    width:20%;
    height:100px;
    background:#000;
}

問題が 1 つあります...ウィンドウのサイズを変更すると壊れます。マージンとサイズがパーセンテージで行われているため、ウィンドウのサイズが変更されたときに機能しない理由について知りたいのですが、正しいものに変更する必要がありますよね?

私の質問は:

ビューアがウィンドウのサイズを変更すると、CSS パーセンテージが正しく機能しないのはなぜですか? また、ウィンドウを正しくサイズ変更するにはどうすればよいですか?

私が話している問題を実際に確認するには、ロード後にウィンドウのサイズを変更することを忘れないでください。

ここにjsfiddleがあります

EDIT1：

明らかに、これまでの回答に基づいて、これは私がやりたいことの問題であり、要素に絶対的な位置付けを与える石積みと矛盾しています。したがって、これを修正する方法は、正しいパーセンテージに従ってウィンドウのサイズ変更のマージンをやり直すことができる javascript/jquery 行を使用することです...どうすればそれを行うことができますか?

4

2 に答える 2

4

まあ、それは

position: absolute;石積みによって設定されるプロパティ。

絶対配置された要素はフローから取り出されるため、他の要素を配置するときにスペースを占有しません

その行を削除すると、問題なく動作します。これを確認してください

通常、すべての要素の幅と高さが同じであれば、石積みは必要ありません。

アップデート：

小さなスクリプトを実行すると、現在のhtml実装でこれが機能します。

$(".entry").each(function(){
    var $this = $(this)
    var currLeft = 0;
    var containerWidth = 0;
    var newLeft = 0;

    currLeft = parseInt($this[0].style.left, 10);
    containerWidth = parseInt($("#posts").width(), 10);

    newLeft = currLeft/containerWidth * 100;

    $this.css({
        "left": newLeft + "%"
    })
});

したがって、スクリプトが行うことはcurrLeft、ピクセル単位newLeftでパーセンテージを計算することです。

リンクのテスト

于 2013-06-21T04:49:03.780 に答える
1

これはあなたのmasonry pluginチェックのためです

これpluginは自動的に適用されposition、left top positions

プロパティを削除すると、正常に動作します。

更新しました

コードを次のように変更します

HTML

<div id="posts">
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div style="clear:both"></div>
</div>

CSS

#posts{
    width:100%;
    height:auto !important;
    background:#666;
}
.entry-content{
    float:left;
    margin-left: 4%;
    margin-top:10px;
    margin-bottom: 10px;
    width:20%;
    height:100px;
    background:#000;
}

フィドル http://jsfiddle.net/Zpbsn/10/

于 2013-06-21T04:54:27.063 に答える