图像分裂相互粘连的分裂

Question

我正在尝试使用产品的缩略图创建产品详细信息页面。但是我无法弄清楚为什么我的div会互相依赖。 示例 -

我是UI设计的新手。有人可以调查并建议我。或者我应该如何设计产品详细信息页面？

添加我的div- 的 TemplateCarousel                                                  

</div>
<div id="sync2" style="height:300px;width:300px " class="owl-carousel">
    <div class="item"><img src="img/a.jpg" style="max-width:100%; max-height:100%"></div>
    <div  class="item"><img src="img/a.jpg" style="max-width:100%; max-height:100%"></div>
    <div  class="item"><img src="img/3.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/4.png" style="max-width:100%; max-height:100%"></div>
    <div  class="item"><img src="img/bg.png" style="max-width:100%; max-height:100%"></div>

</div>

模板的消费者

<div class="row">
    <div class="col-sm-6 col-md-5 "><p >Box 1 <carousel></carousel></p></div>
    <div class="col-sm-6 col-md-4 "><p>Box 2</p></div>
    <div class="clearfix visible-sm-block"></div>
    <div class="col-sm-6 col-md-3 "><p>Box 3</p></div>
</div>