Поместите два flexslider бок о бок?

Question

У меня возникли проблемы с установкой двух flexsliders рядом. Вот мой код:

<div class="flexslider" style="width:50%;height:50%;position:relative;"> 
    <ul class="slides"> 
     <li> 
     <img src="img1.jpg" /> 
     </li> 
     <li> 
     <img src="img2.jpg" /> 
     </li> 
     <li> 
     <img src="img3.jpg" /> 
     </li> 
    </ul> 
</div> 
<div class="flexslider" style="width:50%;height:50%;position:relative;"> 
    <ul class="slides"> 
     <li> 
     <img src="img1.jpg" /> 
     </li> 
     <li> 
     <img src="img2.jpg" /> 
     </li> 
     <li> 
     <img src="img3.jpg" /> 
     </li> 
    </ul> 
</div> 

Я думаю, что это может быть решена путем добавления поплавка: осталось где-то в коде CSS, но я честно не знаю, где.

Answer 1

Обновите свои html и css этим.

.flexslider{ 
 
    display:inline-block; 
 
    width:49%; 
 
    }

<div class="flexslider"> 
 
    <ul class="slides"> 
 
     <li> 
 
     <img src="img1.jpg" /> 
 
     </li> 
 
     <li> 
 
     <img src="img2.jpg" /> 
 
     </li> 
 
     <li> 
 
     <img src="img3.jpg" /> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<div class="flexslider"> 
 
    <ul class="slides"> 
 
     <li> 
 
     <img src="img1.jpg" /> 
 
     </li> 
 
     <li> 
 
     <img src="img2.jpg" /> 
 
     </li> 
 
     <li> 
 
     <img src="img3.jpg" /> 
 
     </li> 
 
    </ul> 
 
</div>