html - 响应式容器流动性

Question

非常感谢您的帮助。我目前正在开发响应式网页。我的布局有点像苹果。我有一个大标题(幻灯片)并在其下放置了 3 张图片。 slider 已经响应，所以当我最小化它时它变得越来越小。问题是放置在此 slider 下的 3 个图像没有上升。我的意思是它们不随 slider 上升，因此它们之间存在巨大差距。我认为我的问题是绝对位置，但我不确定如何解决它。

这是我的菜单、 slider 、图片代码:

http://www.mediafire.com/download/z148onn81c1oa4d/Website_Problem.rar

这是一个链接，供所有无法在发布的代码中看到问题的人使用。我真的很感谢你的帮助。 LG莱罗

.rslides {
  position: absolute;
  list-style: none;
  overflow: hidden;
  width: 75%;
  max-height: 88%;
  top: 0;
  left: 12.5%;
  padding: 0;
  margin: 0;
  z-index: -1;
  float: left;
  }
.rslides li {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
#news {
    background-image: url("../bilder/news.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 32%;
    width: calc(75%/3);
    position: absolute;
    top: 88%;
    left: 12.5%;
    }
#standort {
    background-color: yellow;
    height: 32%;
    width: calc(75%/3);
    position: absolute;
    top: 88%;
    left: 37.5%;
    opacity: 0.85;
    }
#öffnungszeiten {
    background-color: orange;
    height: 32%;
    width: calc(75%/3);
    position: absolute;
    top: 88%;
    left: 62.5%;
    opacity: 0.85;
    }
/* Padding regelt die Größe von Nav und Footer */
#logo{
  position: absolute;
  left: 13%;
  width: 15%;
  height: 15%;
  top: 0;
  z-index: 1;
   }
#footer-wrapper {
    background-color: #A4CD6F;
    position:absolute;
    width: 75%;
    top: 121%;
    left: 12.5%;
    font-size: 85%;
    }
nav {
    background-color: #DBDAB7;
    position:absolute;
    width:75%;
    top:0%;
    left:12.5%;
    opacity: 0.85; 
    }
ul {
    margin:0;
    padding:0;
    }
ul li {
    list-style:none;
    }
ul li a {
    text-decoration:none;
    float:right;
    display:table-cell;  
    font-family: Verdana;
    color: black;
    padding:15px 30px 15px 0;
    }

<ul class="rslides">
  <li><img src="bilder/IMG_4819.jpg" width="100" height="100" alt="Ein Holzstapel hinter Stroh im Eingangsbereich"></img></li> 
  <li><img src="bilder/Bank.jpg" width="100%" height="75%" alt="Unsere Schöne Bank vor dem Eingangsbereich"></img></li>
  <li><img src="bilder/Kartoffeln.png" width="100" height="100" alt="Ein Mitarbeiten an der Gemüse Theke"></img></li> 
</ul> 

<nav>
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Products</a>

        </li>
        <li><a href="#">Contact us</a>

        </li>
    </ul>
</nav>
 
<a href="#"><div id="news"></div></a>
<div id="standort"></div>
<div id="öffnungszeiten"></div>

我很乐意看到一些帮助。

LG

Answer 1

这个问题可以使用媒体查询来解决。位置可根据设备尺寸缩小。