Question

我正在尝试定位并在表格单元格中包含一个轮播（两个单元格行的左侧）。旋转木马不断向右复制，但正常工作时没有整个表结构。我这样做的全部理由是垂直对齐轮播和按钮/图像内容，以便在调整浏览器大小时保持原位。

以下是完整代码：

＆＃13;

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

＆＃13;

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

＆＃13;

1,"a","a"+"b",2+5

＆＃13;

任何想法

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提示！

Div不包含在细胞中

1 个答案: