Question

当我尝试将我的滚动条放在JQuery幻灯片放映的右侧时，它不起作用。我甚至试图将幻灯片放到幻灯片放映的幻灯片中，因为我没有要求它调整大小......我已经在网上搜索了几个小时寻找答案。基本上我需要滚动框出现在幻灯片放映的右侧，有人能告诉我什么是错的吗？

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="css/hirosteez.css">
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <meta charset="UTF-8">
        <title>CITY BLOCKS</title>
            <meta name="viewport" content="width=device-width">
  <!-- End SlidesJS Required -->

  <!-- CSS for slidesjs.com example -->
  <link rel="stylesheet" href="css/example.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <!-- End CSS for slidesjs.com example -->

  <!-- SlidesJS Optional: If you'd like to use this design -->
  <style>
    body {
      -webkit-font-smoothing: antialiased;
      font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    #slides {
      display: none
      float: none;
    }

    #slides .slidesjs-navigation {
      margin-top:3px;
    }

    #slides .slidesjs-previous {
      margin-right: 5px;
      float: left;
    }

    #slides .slidesjs-next {
      margin-right: 5px;
      float: left;
    }

    .slidesjs-pagination {
      margin: 6px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(img/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    .navbar {
      overflow: visible;
    }
  </style>
  <!-- End SlidesJS Optional-->

  <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
  <style>
    #slides {
      display: none
    }

    .container {
      margin-right: 600px;
    }

    /* For tablets & smart phones */
    @media (max-width: 767px) {
      body {
        padding-left: 20px;
        padding-right: 20px;
      }
      .container {
        width: auto
      }
    }

    /* For smartphones */
    @media (max-width: 480px) {
      .container {
        width: auto
      }
    }

    /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 979px) {
      .container {
        width: 724px
      }
    }

    /* For larger displays */
    @media (min-width: 1200px) {
      .container {
        width: 600px
      }
    }
  </style>
    </head>
        <div class="wrapper clear">
            <header>
                <h1><img src="images/ban.jpg"/img></h1><!-- THIS IS BANNAR -->
                <nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">HISTORY</a>
            <ul>
                <li><a href="#">EXPRESSIONS AND ORIGINS</a></li>
                <li><a href="#">GOLDEN AGE:TRANSIT</a></li>
                <li><a href="#">SILVER AGE:CLEAN TRAIN ERA</a></li>
                <li><a href="#">BRONZE AGE:NEW LIFE ON THE STREETS</a></li>
            </ul>
        </li>
        <li><a href="#">GALLERY</a>
            <ul>
                <li><a href="#">TRAINS</a></li>
                <li><a href="#">INSIDES</a></li>
                <li><a href="#">CLEAN TRAINS AND SCRAPS</a></li>
                <li><a href="#">STREET LEVEL</a></li>
                <li><a href="#">TRUCKS</a></li>
                <li><a href="#">EVERYTHING ELSE</a></li>
            </ul>
        </li>
        <li><a href="#">INTERVIEWS</a>
            <ul>
                <li><a href="#">DOLE.CAC</a></li>
                <li><a href="#">FUTURA 2000</a></li>
                <li><a href="#">PEWE.TPA</a></li>
                <li><a href="#">REBEL.NSA</a></li>
            </ul>
        </li>
    </ul>
            </header>
            <section id="mainContent">
                <div class="container">
    <div id="slides">
      <img src="images/seenskihicki.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
      <img src="images/seenskihiki2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
      <img src="images/seenskihicki3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
      <img src="images/seenskihicki4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
      <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
      <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
    </div>
         <div class="storyboard"><div style="width:150px;height:150px;line-height:3em;overflow:auto;padding:5px;clear: both;">
This 'div' element contains more content than the previous one. Because there's too much text to fit into the box, the box grows scrollbars. 
</div>
  </div>
  <!-- End SlidesJS Required: Start Slides -->

  <!-- SlidesJS Required: Link to jQuery -->
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <!-- End SlidesJS Required -->

  <!-- SlidesJS Required: Link to jquery.slides.js -->
  <script src="js/jquery.slides.min.js"></script>
  <!-- End SlidesJS Required -->

  <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
  <script>
    $(function() {
      $('#slides').slidesjs({
        width: 940,
        height: 528,
        navigation: false
      });
    });
  </script>

    </div>

我不知道问题是什么？这是第一个CSS body，div，h1，h2，h3，h4，h5，h6，p，ul，ol，li，dl，dt，dd，img，form，fieldset，input，textarea，blockquote，nav，header，.wrapper { 保证金：0;填充：0;边界：0; }

body {
    font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}

.slides {
    clear:both
}
/* -------------- centering your page -------------- */
.wrapper{
    width: 1200px;
    margin: 30px auto;

}

head{
    z-index : 2000;
    position: relative;
}

nav {
    text-align: center;
    width: 1200px;
    z-index : 2000;
    position: relative;
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #fff;
        }
            nav ul li:hover a {
                color: #FF3333;
            }

        nav ul li a {
            display: block; padding: 25px 40px;
            color: #3366FF; text-decoration: none;
        }


    nav ul ul {
        position: absolute; top: 100%;
    }
        nav ul ul li {
            float: none;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #fff;
            }   
                nav ul ul li a:hover {
                    outline: solid 2px;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

浮在JQuery元素上，但滚动框拒绝对齐告诉我这里有什么不对

0 个答案: