并排放置两个 flexslider?

Putting two flexslider side-by-side?

我无法并排放置两个 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 代码的某处添加 float:left 来解决,但老实说我不知道​​在哪里。

用这个更新你的 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>