0

すべてが中央に配置され、幅が660pxのtumblrテーマを作成しました。

ただし、幅940ピクセルの大きな画像も投稿し、-140ピクセル（940-660 / 2）の負のマージンを与えることで中央に配置していますが、すべての画像をこのサイズで投稿する必要があるため、これは理想的ではありません。 、またはそれらはちょうど左に整列されます。

サイトの一番下までスクロールして、正しく配置されていない画像を確認します：http ://seans.ws

css：

        section {display: block; clear: both; margin: 0 auto;width: 660px;}

        article img {clear: both; max-width: 940px; margin-left: -140px;}

助けてくれてありがとう！

4

2 に答える 2

1

次の2つのソリューションから選択できます。

マークアップ：

<div id="content">
  <div class="a"><div class="b">
    <img src="http://placekitten.com/100/100">
  </div></div>
  <div class="a"><div class="b">
    <img src="http://placekitten.com/2000/100">
  </div></div>

一般的なCSS：

#content {
    width: 300px;
    margin: 0 auto;
    border: 1px solid blue;
}
.a {
    /* extend image area */
    margin-left :-9999px;
    margin-right:-9999px;
    /* but without scrollbars */
    position: relative;
    left: -9999px;
}
.a .b {
    /* undo scrollbar-removing positioning */
    position: relative;
    left: 9999px;
}

display: table方法：

http://jsfiddle.net/ZhEku/3/

.a .b {
    display: table;  /* shrink-wrap to content (= the image) */
    width:   300px;  /* content width, acts as min-width when display:table */
    margin:  0 auto; /* center inside the (2*9999+300)px area */
}

display: inline-block方法：

http://jsfiddle.net/ZhEku/4/

.a {
    /* center content (= the image wrapped into .b) */
    text-align: center;
}
.a .b {
    display:    inline-block; /* shrink-wrap to content (= the image) */
    min-width:  300px;        /* content width */
    text-align: left;         /* if image is smaller than the content */
}

お楽しみください:)

于 2012-07-01T19:41:23.097 に答える
0

これが無限スクロールjsです：http ：//static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js

コンテナのデフォルトの幅よりも大きい画像のマージン左スクリプトは次のとおりです。

    <!--Dynamicaly center big images-->
    <script>
    $(window).load(function() {
        $(function() {
            $('img').css('marginLeft', function(index, value){
                if($(this).width() > 660) {
                    return -($(this).width() - 660)/2;
                }
                return value;
            });
        });
    });
    </script>

私が理解する必要がある唯一のことは、無限のスクロールがあるために動的にロードされる画像でこれと同じ機能を実行する方法です（ページを下に移動するまで下の画像がロードされないように）。

于 2012-07-01T20:47:08.083 に答える