javascript - Div 不包含在单元格中

Question

我正在尝试在表格单元格(两个单元格行的左侧)中定位和包含轮播。旋转木马不断向右复制，但在整个表格结构不正确的情况下也能正常工作。我这样做的全部原因是垂直对齐轮播和按钮/图像内容，以便在调整浏览器大小时它们保持原位。

完整代码如下:

var someFunction = function() {};

(function() {
  $('.owl-carousel').owlCarousel({
    center: true,
    items: 1,
    loop: true,
    margin: 10,
    nav: true,
    autoplay: true,
    autoplayTimeout: 3000,
    animateOut: 'fadeOut',
    dots: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
  })
})();



someFunction();

.owl-carousel {
  position: relative;
}

.owl-prev,
.owl-next {
  position: absolute;
  top: 44%;
  height: 10vh;
  width: 10vh;
}

.owl-prev {
  left: 0.5vh;
}

.owl-next {
  right: 0.5vh;
}

<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.theme.default.min_home_up_6.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.carousel.min.js"></script>

  <table style="width: 100%;"><tr><td width="75%" style="text-align: center; vertical-align: middle;"><div class="owl-carousel owl-theme"><div class="item" style="width:100%;text-align:center;"><img src="img1.jpg"></div><div class="item" style="width:100%;text-align:center;"><img src="img2.jpg"></div></div></td><td width="25%" style="text-align: center; vertical-align: middle;">Unknown stuff to be centered. </td></tr></table>

任何想法

Answer 1

仍然有点乱，但这是我的解决方案:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.carousel.min.js"></script>

var someFunction = function(){};

(function() {
			 
$('.owl-carousel').owlCarousel({
    center: true,
    items:1,
    loop:true,
    margin:10,
    nav:true,
    autoplay:true,
    autoplayTimeout:3000,
    animateOut: 'fadeOut',
    dots: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
})
            })();



someFunction();  

<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.theme.default.min_home_up_6.css">


.owl-carousel {
position: relative;
}
.owl-prev,
.owl-next {
position: absolute;
top: 44%;
height: 10vh;
width:10vh;


}
.owl-prev {
left: 0.5vh;
}
.owl-next {
right: 0.5vh;
}

@import "compass/css3";

.flex-container {
  padding: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
    
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item_1 {
  width: 67%;
  height: 100%;
  margin: auto;

  
}

.flex-item_2 {
  width: 33%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin: auto;
  
  &.first {
    height: 50%; 
    background: silver;
  }
  &.second {
    height: 50%; 
    background: lightgray;
  }
}
    

  <ul class="flex-container">
  <li class="flex-item_1">
    
     <div class="owl-carousel owl-theme">
    
<div class="item" style="width:100%;text-align:center;"><img src="/files/Shot_Slider.jpg"></div>
    
<div class="item" style="width:100%;text-align:center;"><img src="/files/Tea_Slider.jpg"></div>

<div class="item" style="width:100%;text-align:center;"><img src="/files/CBD_Slider.jpg"></div>

<div class="item" style="width:100%;text-align:center;"><img src="/files/Bowl_Slider.jpg"></div>

<div class="item" style="width:100%;text-align:center;"><img src="/files/Water_Slider.jpg"></div>

<div class="item" style="width:100%;text-align:center;"><img src="/files/Dry_Goods_Slider.jpg"></div>

<div class="item" style="width:100%;text-align:center;"><img src="/files/1/2793/0346/files/Green_Slider.jpg"></div>
    

</div>
    
  </li>
  <li class="flex-item_2">
    
    <ul>
  <li class="first" style="font-size:50px; background: #FF8566;">Fresh & Juicy</li>
  <li class="second" style="font-size:50px;"><a href="/pages/menu_up">SHOP</a></li>
</ul>
    

    
  </li>
</ul>

再次感谢所有帮助，尤其是关于 Flexbox 的提示!