Javascript JS/CSS问题与Div滑块和显示：表格单元格

我有一个Div滑块，可以旋转一组Div，使其进入和离开焦点。一切正常，直到我尝试将所有内容切换到（表/表单元格），以便在CSS中保持所有div的高度相同。现在它们仍然向外旋转，但一个div仍然可见，舞台一侧的宽度减小。我有一种感觉，它的位置相关，但就是不知道是什么导致了这个问题

受影响网页-

JS代码：

$('.blog-posts').wrapInner('<div class="blog-posts-stage" />');


// Calculate Conditions & Set Vars

// var playTimer = 9,
slideQty = $('.well').length,
  slideWidth = $('.well').width(),
  stageWidth = $('.blog-posts-stage').width(),
  contWidth = $('.blog-posts').width();

if ((slideQty * slideWidth) < contWidth) {
  $('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
  $('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
  $('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
  $('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}

$(window).resize(function() {
  var slideQty = $('.well').length,
    slideWidth = $('.well').width(),
    stageWidth = $('.blog-posts-stage').width(),
    contWidth = $('.blog-posts').width();
  if ((slideQty * slideWidth) < contWidth) {
    $('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
    $('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
  } else {
    $('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
    $('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
  }
});

$('.blog-posts-next').on('click', function(event) {
  event.preventDefault();
  $('.blog-posts-stage').animate({
    left: -(slideWidth)
  }, 500, function() {
    $('.well:first').appendTo('.blog-posts-stage');
    $('.blog-posts-stage').css({
      left: '0px'
    });
  });
});

$('.blog-posts-prev').on('click', function(event) {
  event.preventDefault();
  $('.well:last').prependTo('.blog-posts-stage');
  $('.blog-posts-stage').css({
    left: -(slideWidth)
  });
  $('.blog-posts-stage').animate({
    left: '0px'
  }, 500, function() {});
});

function moveForward() {
  $('.blog-posts-stage').animate({
    left: -(slideWidth)
  }, 500, function() {
    $('.well:first').appendTo('.blog-posts-stage');
    $('.blog-posts-stage').css({
      left: '0px'
    });
  });
}
var timer = setInterval(moveForward, playTimer);

$('.blog-posts, .blog-posts-prev, .blog-posts-next').hover(function(ev) {
  // clearInterval(timer);
}, function(ev) {
  // timer = setInterval( moveForward, playTimer);
});

<style>
    .blog-posts {
        width: 100%;
        background: #eee;
        font-size: 0;
        position: relative;
    }
    .blog-posts-prev,
    .blog-posts-next {
      display: inline-block;
      background: #eee;
      color: #000;
      text-decoration: none;
      padding: 10px;
      margin: 5px 0;
    }
    .blog-posts-prev:hover,
    .blog-posts-next:hover {
      background: #ccc;
    }
    .blog-posts-prev-disabled,
    .blog-posts-next-disabled {
      display: inline-block;
      background: #eee;
      color: #ccc;
      text-decoration: none;
      padding: 10px;
      margin: 5px 0;
    }
    .blog-posts-stage {
        position: relative;
        white-space: normal;
        width: 100%;
        height: 100%;
        float: none;
    }       
    .well {
        background: #ccc;
        box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
        width: 100%;
        font-size: 12px;
        text-align: left;
        display: table-cell;
        height: 100%;
        width: 100%;
    }
    .well .row .col-sm-12.col-md-12 h2 {
        float: left;
        margin-top: 0px;
    }
</style>

$（'.blog posts'）.wrapInner（''）；
//计算条件并设置变量
//var playTimer=9，
滑块数量=$（'.well'）。长度，
slideWidth=$（'.well'）.width（），
stageWidth=$（'.blog posts stage'）.width（），
contWidth=$（'.blog posts'）.width（）；
如果（（滑动数量*滑动宽度）

CSS代码：

$('.blog-posts').wrapInner('<div class="blog-posts-stage" />');


// Calculate Conditions & Set Vars

// var playTimer = 9,
slideQty = $('.well').length,
  slideWidth = $('.well').width(),
  stageWidth = $('.blog-posts-stage').width(),
  contWidth = $('.blog-posts').width();

if ((slideQty * slideWidth) < contWidth) {
  $('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
  $('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
  $('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
  $('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}

$(window).resize(function() {
  var slideQty = $('.well').length,
    slideWidth = $('.well').width(),
    stageWidth = $('.blog-posts-stage').width(),
    contWidth = $('.blog-posts').width();
  if ((slideQty * slideWidth) < contWidth) {
    $('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
    $('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
  } else {
    $('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
    $('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
  }
});

$('.blog-posts-next').on('click', function(event) {
  event.preventDefault();
  $('.blog-posts-stage').animate({
    left: -(slideWidth)
  }, 500, function() {
    $('.well:first').appendTo('.blog-posts-stage');
    $('.blog-posts-stage').css({
      left: '0px'
    });
  });
});

$('.blog-posts-prev').on('click', function(event) {
  event.preventDefault();
  $('.well:last').prependTo('.blog-posts-stage');
  $('.blog-posts-stage').css({
    left: -(slideWidth)
  });
  $('.blog-posts-stage').animate({
    left: '0px'
  }, 500, function() {});
});

function moveForward() {
  $('.blog-posts-stage').animate({
    left: -(slideWidth)
  }, 500, function() {
    $('.well:first').appendTo('.blog-posts-stage');
    $('.blog-posts-stage').css({
      left: '0px'
    });
  });
}
var timer = setInterval(moveForward, playTimer);

$('.blog-posts, .blog-posts-prev, .blog-posts-next').hover(function(ev) {
  // clearInterval(timer);
}, function(ev) {
  // timer = setInterval( moveForward, playTimer);
});

<style>
    .blog-posts {
        width: 100%;
        background: #eee;
        font-size: 0;
        position: relative;
    }
    .blog-posts-prev,
    .blog-posts-next {
      display: inline-block;
      background: #eee;
      color: #000;
      text-decoration: none;
      padding: 10px;
      margin: 5px 0;
    }
    .blog-posts-prev:hover,
    .blog-posts-next:hover {
      background: #ccc;
    }
    .blog-posts-prev-disabled,
    .blog-posts-next-disabled {
      display: inline-block;
      background: #eee;
      color: #ccc;
      text-decoration: none;
      padding: 10px;
      margin: 5px 0;
    }
    .blog-posts-stage {
        position: relative;
        white-space: normal;
        width: 100%;
        height: 100%;
        float: none;
    }       
    .well {
        background: #ccc;
        box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
        width: 100%;
        font-size: 12px;
        text-align: left;
        display: table-cell;
        height: 100%;
        width: 100%;
    }
    .well .row .col-sm-12.col-md-12 h2 {
        float: left;
        margin-top: 0px;
    }
</style>

.博客帖子{
宽度：100%；
背景：#eee；
字号：0；
位置：相对位置；
}
.blog posts prev，
.下一篇博客文章{
显示：内联块；
背景：#eee；
颜色：#000；
文字装饰：无；
填充：10px；
保证金：5px0；
}
.blog posts prev:hover，
.博客帖子下一步：悬停{
背景：#ccc；
}
.blog posts prev已禁用，
.blog帖子下一步禁用{
显示：内联块；
背景：#eee；
颜色：#ccc；
文字装饰：无；
填充：10px；
保证金：5px0；
}
.博客帖子阶段{
位置：相对位置；
空白：正常；
宽度：100%；
身高：100%；
浮动：无；
}       
.嗯{
背景：#ccc；
框阴影：插图-1px 0px 0px rgb（255、255、255）；
宽度：100%；
字体大小：12px；
文本对齐：左对齐；
显示：表格单元格；
身高：100%；
宽度：100%；
}
.好的，行。col-sm-12.col-md-12 h2{
浮动：左；
边际上限：0px；
}

您可以使用lightbox库，省去您的工作量，但是如果您真的想这样做，为什么不试试flex呢

.blog-posts-stage {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.well-large {
  flex-shrink: 0;
}

---

将显示更改为表格单元格之前的行为是什么？滑块是否显示两行一列？我们学院坚持支持IE，因为它是我们的one DB计划和工资单所必需的。它是25%的访问者的默认浏览器，我们被迫支持它。我将在这个案例中使用flex，但我必须为IE添加一个静态高度。