석공 술을 이용한 반응 형 및 타임 라인 디자인으로 붙박이

Question

tumblr 및 jQuery Masonry에 새로 입문했습니다. 테스트 블로그를 만들었습니다.

나는 타임 라인 디자인을 사용하여 게시물을 양면으로 정렬하고 포스트 사이의 공간을 제거하기 위해 석조물을 사용했습니다. 그리고 이에 대한 반응 형 동작을 추가했습니다.

페이지가로드 될 때 Post와 Masonry가 다른 창 크기에서 반응 형으로 올바르게 작동하지만 창 크기를 조정하면 설계가 엉망입니다.

나는 내 코드의 실수 나 벽돌의 :( 어떤 도움이 정말 도움이 될 것입니다 식별 할 수 없습니다입니다.

그것은 단지 (min-width: 768px), (min-width: 1024px) 및 (min-width: 1824px)

작동하지 않습니다

내 코드는 다음과 같습니다. JS

$(document).ready(function() { 

    if ($(window).width() <= 679) { 
     $('#posts_container').masonry('destroy'); 
    } 

    if ($(window).width() > 680) { 
     $('#posts_container').masonry({itemSelector: '.shadow', }); 
    } 

    Arrow_Points(); 
}); 

function Arrow_Points() { 
    //alert("function call"); 
    var s = $('#posts_container').find('.shadow'); 
    $.each(s, function(i, obj) { 
     var posLeft = $(obj).css("left"); 
     $(obj).addClass('borderclass'); 
     if (posLeft == "0px") { 
      html = "<span class='rightCorner'></span>"; 
      html += "<div class='rightpostcorner'></div>"; 
      $(obj).prepend(html); 

      $(this).addClass('margin_hack_left_post'); 
     } 
     else 
     { 
      html = "<span class='leftCorner'></span>"; 
      html += "<div class='leftpostcorner'></div>"; 
      $(obj).prepend(html); 

      $(this).addClass('margin_hack_right_post'); 
     } 

    }); 
} 

미디어

@media only screen and (max-width: 480px) { 
.wrapper {width: 100%;} 
.rightCorner, .leftCorner{ display: none; } 
.shadow {width: 90%; margin: 40px 5% 10px 5%; } 
} 

@media only screen and (max-width: 680px) and (min-width: 480px){ 
.wrapper {width: 100%;} 
.rightCorner, .leftCorner{ display: none; } 
} 

@media only screen and (max-width: 768px) and (min-width: 680px){ 
.wrapper {width: 100%;} 
.rightCorner, .leftCorner{ display: none; } 
.shadow {width: 90%; margin: 40px 5% 10px 5%; } 
} 

@media only screen and (min-width: 768px) and (max-width: 1024px) { 
    .leftCorner { margin-left:-9%;} 
    .shadow { width: 45.5%; margin-top: 40px; } 
    .margin_hack_left_post { margin-left:1.5%%; } 
    .margin_hack_right_post { margin-left:7.5%; } 
} 

@media only screen and (min-width: 1025px) and (max-width: 1824px) { 
.wrapper {width: 100%; } 
.leftCorner {margin-left: -5.5%; } 
.shadow { width: 43.7%; margin-top: 40px; } 
.margin_hack_left_post { margin-left:4%; } 
.margin_hack_right_post { margin-left:8%; } 
} 

/* LARGE SCREENS */ 
@media only screen and (min-width: 1824px) { 
.wrapper {width: 1200px; margin: 0 auto;} 
.shadow { width: 43.7%; margin-top: 40px; } 
.margin_hack_left_post { margin-left:4%; } 
.margin_hack_right_post { margin-left:8%; } 
} 

내 CSS :

.shadow 
    { 
     float: left; 
     background-color: #ffffff; 
     min-height: 50px; 
     text-align: justify; 
     word-wrap:break-word; 
    } 

    .timeline_container 
    { 
     width: 16px; 
     text-align: center; 
     margin: 0 auto; 
     cursor:pointer; 
     display: block; 
    } 

    .timeline 
    { 
     margin: 0 auto; 
     background-color: red; 
     display: block; 
     float: left; 
     height: 100%; 
     left: 49.75%; 
     position: absolute; 
     width: 1px; 
     z-index: -1; 
    } 

    .timeline:hover{cursor: pointer;margin: 0 auto;} 

    .timeline div.plus{width: 14px;height: 14px;position: relative;left: -6px;} 

    .rightCorner 
    { 
     background-image: url("xyz.png"); 
     height: 30px; 
     margin-left: 99.5%; 
     margin-top: 8px; 
     padding: 0; 
     vertical-align: top; 
     width: 30px; 
     z-index: 2; 
     position: absolute; 
    } 

    .leftCorner 
    { 
     background-image: url("abc.png"); 
     height: 30px; 
     width: 30px; 
     margin-top: 8px; 
     position: absolute; 
     z-index:2; 
    } 

    .content 
    { 
     margin-left: auto; 
     margin-right: auto; 
     max-width: none; 
     min-width: 86%; 
     position: relative; 
     z-index: 2; 
    } 

그리고 내 텀블러 HTML은

 {block:Posts} 
     <article class="shadow"> 
      {block:Date} 
      <div class="post_info"> 
       <section class="post-controls"> 
        <ul style="padding-left: 0px; float: left; width:80%"> 
         <li style="width: 30%; margin-left: 0px; padding-left: 0px; margin-top: 7px;"> 
          <i class="icon-clock"></i> {DayOfMonthWithZero} {ShortMonth} {ShortYear} 
         </li> 
         {block:NoteCount}<li style="width: 30%; margin-left: 0px; padding-left: 0px; margin-top: 7px;"> 
          <i class="icon-heart"></i> {NoteCount}</li>{/block:NoteCount} 
        </ul> 

        <ul style="float:right;"> 
         <li class="like_link">{ReblogButton size="20"}</li> 
         <li class="reblog_link">{LikeButton size="20"}</li> 
        </ul> 
       </section> 
      </div> 
      {/block:Date} 

      <div class="post_padding"> 
       {block:Audio} 
       <div class="audio" id="{PostID}"> 
        <div class="album_art">{block:AlbumArt}<img class="scale-with-grid" src="{AlbumArtURL}" />{/block:AlbumArt}</div> 
        <div class="audio_player_container"> 
         {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed} 
         {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer} 
        </div> 

        <div class="caption"> 
         <ul class="audio_details"> 
          {block:TrackName}<li><span class="audio_bold">Song Title:</span> {TrackName}</li>{/block:TrackName} 
          {block:Artist}<li><span class="audio_bold">Artist:</span> {Artist}</li>{/block:Artist} 
          {block:Album}<li><span class="audio_bold">Album:</span> {Album}</li>{/block:Album} 
          <li><span class="audio_bold">Plays:</span> {PlayCount}</li> 
         </ul> 

         {block:Caption}{caption}{/block:Caption} 
        </div> 
       </div> 
       {/block:Audio} 

       {block:Chat} 
       {block:Title}<div class="chat_title"><h2><a href="{Permalink}">{Title}</a></h2></div>{/block:Title} 
       {block:Lines} 
       <div class="lines"><div class="line {Alt}">{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</div></div> 
       {/block:Lines} 
       {/block:Chat} 

       {block:Link} 
       <div class="link_title"><a href="{URL}" {Target}>{Name} &rarr;</a></div> 
       <div class="caption">{block:Description}{Description}{/block:Description}</div> 
       {/block:Link} 

       {block:Photo} 
       <div class="photo_post"> 
        <a href="{Permalink}" rel="prettyPhoto"> 
         <img class="scale-with-grid" src="{PhotoURL-HighRes}"/> 
        </a> 
       </div> 
       {block:Caption}<div class="caption">{Caption}</div>{/block:Caption} 
       {/block:Photo} 

       {block:Photoset} 
       <div class="photo-slideshow" data-layout="{PhotosetLayout}"> 

        {block:Photos} 
        <div class="photo-data"> 
         <div class="photo"> 
          <a href="{Permalink}" rel="prettyPhoto[set]"> 
           <img alt="{PhotoAlt}" src="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" class="{block:Exif}exif-yes {/block:Exif}{block:Caption}caption-yes{/block:Caption}" {block:Exif}data-camera="{block:Camera}{Camera}{/block:Camera}" data-iso="{block:ISO}{ISO}{/block:ISO}" data-aperture="{block:Aperture}{Aperture}{/block:Aperture}" data-exposure="{block:Exposure}{Exposure}{/block:Exposure}" data-focal="{block:FocalLength}{FocalLength}{/block:FocalLength}"{/block:Exif} {block:Caption}data-caption="{Caption}"{/block:Caption}> 
          </a> 
         </div> 
         <div class="icons"> 
          <a rel="prettyPhoto" class="view" rel="post-{PostID}" href="{PhotoURL-HighRes}"><span class="zoom">Zoom</span></a> 
          <span class="info">Info</span> 
         </div> 
        </div> 
        {/block:Photos} 
       </div><!-- close SLIDESHOW --> 

       <div class="caption">{block:Caption}{Caption}{/block:Caption}</div> 
       {/block:Photoset} 

       {block:Quote} 
       <div class="quote_title"><h2>"{Quote}"</h2></div> 
       <div class="caption"><p>{block:Source}- {Source}{/block:Source}</p></div> 
       {/block:Quote} 

       {block:Text} 
       {block:Title}<div class="post_title"><h2><a href="{Permalink}">{Title}</a></h2></div>{/block:Title} 
       <div class="caption">{Body}</div> 
       {/block:Text} 

       {block:Video} 
       <div class="video_post"> 
        <figure><div class="embed">{Video-500}</div></figure> 
        {block:Caption}<div class="caption">{Caption}</div>{/block:Caption} 
       </div> 
       {/block:Video} 
      </div> 
     </article> 
     {/block:Posts} 

Answer 1

자바 스크립트의 폭에 따라, 왼쪽 여백에 대한 하드 픽셀을 생성합니다 브라우저 창. 하드 픽셀을 50 %로 변경하십시오.

jQuery를이 :

$(this).css("left", "50%");