并排放置两个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>