從網格偏移Div

-1

上面你會發現我想要實現的一個草圖。我正在以12列布局工作。我希望div .row-2最多可以在右邊10列，但一直走到左邊的.main-container的邊緣。

下面是我一直在使用，但不斷收到錯誤。

$('.main-container').once('.row-2').each(function() { 
 
     $(window).on('resize', function() { 
 
      $('.row-2').each(function() { 
 
      self.align($(this)); 
 
      }); 
 
     }); 
 
     }); 
 

 
     $(document).ready(function() { 
 
     $('.row-2', context).once('.row-2').each(function() { 
 
      self.align($(this)); 
 
     }); 
 
     }); 
 

 
    align: function ($element) { 
 
     $element.css({ 
 
     marginLeft: '' 
 
     }); 
 
     var maxWidth = $element.width(); 
 
     $element.css({ 
 
     marginLeft: 'auto' 
 
     }); 
 
     $('.row-2', $element).each(function() { 
 
     $(this).css({ 
 
      maxWidth: maxWidth, 
 
      marginLeft: 'auto' 
 
     }); 
 
     }); 
 
     var offset = $element.offset(); 
 
     // Use #focus element as wrapping element 
 
     offset.left = offset.left - $('.main-container').offset().left; 
 
     $element.css({ 
 
     marginLeft: (offset.left * -1) + 'px' 
 
     }); 
 

 
    };

.main-container { 
 
    max-width:1680px; 
 
    width:100%; 
 
    height:1000px; 
 
    margin:0 auto; 
 
    background-color:#cccccc; 
 
} 
 
.row-1, .row-2, .row-3 { 
 
    background-color:#f4f4f4; 
 
    width:1000px; 
 
    margin:0 auto; 
 
    height:100px; 
 
    margin-bottom:25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<div class="main-container"> 
 
    <div class="row-1"></div> 
 
    <div class="row-2"></div> 
 
    <div class="row-3"></div> 
 
</div>

來源

2016-10-22 jacks3

哦，男人。幫你一個忙，並得到[bootstrap]（http://getbootstrap.com/）！你可以做偏移[這裏]（http://getbootstrap.com/css/#grid-offsetting）。 –

@StephanGenyk我正在使用Foundation 6.我試圖抵消視口邊緣的div。 – jacks3

@StephanGenyk即使我不使用.columns類，以便.row會變得完整，當您調整瀏覽器大小時，它不會與.row-1和.row-2保持一致。 – jacks3

Here, working example please check below link. 

I have set .row-2 in same container but take different css for .row-2 and .row-1 & .row-3 

and .row-2 take 10 columna same you need please check it 

https://jsfiddle.net/DineshV/frp1Luzo/

[這裏是中心，你說的相同的圖像。你知道顯示中心，因爲你有也沒有調整窗口] [檢查這img]

https://i.stack.imgur.com/sbhlK.png

來源

2016-10-22 07:12:03

不會將.row-2的左側保留在左側和右側方面最大化了。我幾乎100％肯定這是不可能通過CSS實現的。 – jacks3

查看我的上述評論和截圖。 –

從網格偏移Div

回答

相關問題