使包装/容器响应？

时间：2014-06-05 02:43:42

标签： html css containers wrapper

我在尝试制作包含响应式图像滑块的包装器时遇到了很多麻烦，我希望它在窗口重新调整大小时相应缩小，但我无法将其转换为图像滑块不会缩小。请有人请告诉我我做错了什么？

注意*我只想让桌面和平板电脑的响应速度低至500px，移动设备有不同的外观）

（如果它草率，我道歉，我是新来的）

编辑：继承人的实时链接（不是真实图片）：http://testjd.net46.net/ 并且滑块与＆＃34; Logo＆＃34;重叠。当浏览器窗口被重新命名时，我可以阻止它吗？

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
$('#slider').cycle({ 
    fx:     'scrollHorz', 
    prev:   '#prev', 
    next:   '#next', 
    timeout: 0, 
    rev: false 
});
</script>

</head>

<body>

<img src="header.png" width="2022" height="82" alt="header"id="table">

<img src="footer.png" width="2022" height="109" alt="footer" id="table2"> 

<img src="Background.jpg" name="fsbg" width="2022" height="1460" id="fsbg">

<img src="title.png" alt="title" name="title" width="500" height="500" id="title">

<table width="90%" border="0" cellpadding="7" cellspacing="0" id="table3" name="table3">
  <tr>
    <td><img src="500x500/Animal-Ambition-2-100percent-new-with-logo.gif" width="500" height="500" alt="aa"><img src="500x500/50 Cent - Pilot.png" width="500" height="500" alt="pilot"><img src="500x500/50 Cent - Smoke.png" width="500" height="500" alt="smoke"><img src="500x500/50 Cent - Everytime I Come Around.png" width="500" height="500" alt="everytime i come around"><img src="500x500/50-Cent---Irregular-Heartbeat.gif" width="500" height="500" alt="irregular heartbeat"><img src="500x500/50 Cent - Hustler.png" width="500" height="500" alt="hustler"><img src="500x500/50 Cent - Twisted.png" width="500" height="500" alt="twisted"><img src="500x500/50 Cent - Winners Circle.png" width="500" height="500" alt="winners circle"></td>
  </tr>
</table>

<div id="wrapper">
  <div id="container">
    <div class="controller" id="prev"></div>
    <div id="slider">
    <img src="500x500/Animal-Ambition-2-100percent-new-with-logo.gif" width="500" height="500" alt="AA"> 
    <img src="500x500/50 Cent - Pilot.png" width="500" height="500" alt="pilot">
    <img src="500x500/50 Cent - Smoke.png" width="500" height="500" alt="smoke">
    <img src="500x500/50 Cent - Everytime I Come Around.png" width="500" height="500" alt="everytime i come around">
    <img src="500x500/50-Cent---Irregular-Heartbeat.gif" width="500" height="500" alt="irregular heartbeat">
    <img src="500x500/50 Cent - Hustler.png" width="500" height="500" alt="hustler">
    <img src="500x500/50 Cent - Twisted.png" width="500" height="500" alt="twisted"> 
    <img src="500x500/50 Cent - Winners Circle.png" width="500" height="500" alt="winners circle">
    </div>
    <div class="controller" id="next"></div>

  </div>
</div>
</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'my font' ;
    src: url(fonts/CuttyFruty.ttf) 
}

#wrapper {
    display: block;
    max-width: 660px;
    max-height: 500px;
    margin: auto;
    position: fixed;
    top: 0%; 
    bottom: 0%; 
    right: 5%;
}

#container {
    display: block;
    float: left;
    height: auto;
    width: 660px;
    overflow: aut;  

}

#prev {
    background-image: url(left%20button.png);

    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 80px;
    position: relative;
    z-index: 99;
    cursor: pointer;

}

#prev:hover {
    background-image: url(left%20button%20grey.png);
}

#next {
    background-image: url(right%20button.png);
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 80px;
    position: relative;
    z-index: 99;
    cursor: pointer;
}

#next:hover {
    background-image: url(right%20button%20grey.png);
}
#slider {
    display: block;
    height: 500px;
    width: 500px;
    overflow: hidden;
    float: left;
    position: relative;

}
body {
    background-color: #000;
    color: #666;
}
#fsbg {

    width: 100%;
    height: auto;
    position: fixed;
    z-index: -100;
    left: 0px;
    top: 0px;
    min-height: 100%;
    min-width: 1040px;
}
#shadow {
    display: block;
    height: 550px;
    width: 550px;
    margin: auto;
    top: 0%;
    bottom: 0%;
    right: 15%;
    position: fixed;
}

#table {
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 82px;
    z-index: ;
}
#table2 {
    margin: 0 auto;
    padding: 0;
    left: 0px;
    bottom: -15px;
    position: fixed ;
    height: 100px;
    z-index: 0;
}

#table3 {
    left: 0px;
    position: absolute ;
    width: 100%;
    display: none;
}
textem {
    color: #FFF;
}
.textem2 {
    color: #666;
    text-align: right;
    font: 16px "my font" ;
}

#title {
    display: block;
    height: 500px;
    max-width: 100%;
    margin: auto;
    top: 0%;
    bottom: 0%;
    right: 55%;
    position: absolute;
}

@media screen and (max-width: 1000px) {
    #wrapper, #container, #slider {
        width: 100%;
        height: auto;
    }   
}

@media screen and (max-width: 500px) {
  #wrapper, #container, #slider {
    padding: 0px !important;
    display: none !important;

  }

  #prev {
      width: 80px;
      height: 200px;
      position: fixed;
      left: 20%;

      top: 65%;
      padding: 0px !important;
  }

  #next {
      width: 80px;
      height: 200px;
      position: fixed;
      right: 20%;

      top: 65%;
      padding: 0px !important; 
  }

  img {
    width: 100%;
    height: auto;
    margin: auto;
    padding: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
    display: block;
  }

  #table3 {
    left: 0px;
    position: absolute ;
    width: 100%;
    display: block !important;
  }

  #table1 {
      z-index: 50;
      top: 0;
      position: fixed;
  } 

  #table2 {
    z-index: 50;
    bottom: 0;
    position: fixed;
    height: 10%;
  }

}

3 个答案:

答案 0 :(得分：1)

我看到一个问题，可能是手头的问题。它可能很简单，每个人都忽略了它。我附上了上面的css文件中的屏幕截图。你的宽度（编辑：不是宽度，溢出）应该被设置为＆＃34; auto＆＃34;，但你有＆＃34; aut＆＃34;写在那里。Screenshot of CSS Above

答案 1 :(得分：0)

从标记中删除高度和宽度，并通过Css 宽度：100％

答案 2 :(得分：0)

我在这里看到了几个问题。

首先，你的意思是反应，还是流畅？如果您只是想以一种非常基本的方式寻找与窗口大小一致的流畅解决方案，那么@ ezaz建议用width取代100%属性就可以了。

如果您希望更进一步，并根据浏览器的宽度推送不同的样式，那么您需要研究@media queries。这些将允许您更好地控制元素。例如，如果您想在较小的屏幕上显示较小的按钮，您可以执行以下操作：

@media (min-width: 500px) {
    #next {
        height: 500px;
        width: 80px;
        /* etc... */
    }
}

@media (max-width: 499px) {
    #next {
        height: 200px;
        width: 40px;
        /* etc... */
    }
}
相关问题
最新问题