php - 如何在HTML页面的横幅下将滑块和图像保持在一行中

我在网页中添加了BxSlider v4.0。
用于覆盖屏幕的滑块，即宽度为1090px。
在它的下面一幅图像是240 * 220px。
我面临将同一滑块和图像集成到一行中的问题。
滑块将为830px * 250px，图片将为240 * 250px。
请帮忙。

BxSlider v4.0链接jquery.bxslider.css

Slider.php

<div class="slide_show">
<div class="bxsl">
       <!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.js"></script>
<script>
$jbx = jQuery.noConflict();
 $jbx(document).ready(function(){
  $jbx('.bxslider').bxSlider({auto: true,
  autoControls: true,mode: 'horizontal',
  captions: false});

});
</script>
<script>
    $pop = jQuery.noConflict();
    $pop(document).ready(function(){
    $pop("#pop_info").slideDown("slow");
    });
    function hide_it(){
    $hd = jQuery.noConflict();
    $hd("#pop_info").hide("slow");
    }
</script>
<ul class="bxslider">
  <li><img src="images/design/ayurveda_banner.jpg" /></li>
  <li><img src="images/design/banner_inner.jpg" /></li>
  <li><img src="images/design/banner-ayurveda.jpg" /></li>
  <li><img src="images/design/inn_pro_banner.jpg" /></li>
  <li><img src="images/design/inn_pro_banner.jpg" /></li>
  <li><img src="images/design/inn_pro_banner.jpg" /></li>
</ul>
</div></div>

Style.css

> slide_show{width:1100px;float:left;min-height:200px;position:relative;}
.bxsl{float:left;width:830px;min-height:200px;}
.center{float:left;width:1090px;min-height:200px;margin-top:5px;}

Index.php

<?php include('inc/slider.php');?>
<div class="center">
<img src="images/design/indigo.jpg" style="float:right;width:240px;height:250px;border:1px solid #f6f6f6;margin:1px 1px 1px 2px; ">

最佳答案

首先，我认为您的style.css存在以下错误

>幻灯片应为.slide_show，bxslider的类名称不应为bxsl

然后添加以下内容

display: inline-block;
width: 840px;
vertical-align: top;

到.slide_show类并

display: inline-block;
width: 240px;
vertical-align: top;

到.center类

我不是100％确信我了解您的代码，因为您在中心课程中有width:1090px

关于php - 如何在HTML页面的横幅下将滑块和图像保持在一行中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27340163/