从网格偏移Div

Question

上面你会看到我想要实现的草图。我正在进行12列布局。我希望div .row-2在右边最多10列但是一直到左边的.main-container边缘。

以下是我必须使用的内容，但不断收到错误。

＆＃13;

＆＃13;

$('.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'
      });

  };

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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