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