Question

我非常感谢你的帮助。我目前正在处理响应式网页。我的布局有点像苹果。我有一个大标题（幻灯片）并在其下放置3张图片。滑块已经响应，因此当我最小化它时它会变小。问题是放在这个滑块下面的3个图像没有上升。我的意思是他们没有使用滑块，因此它们之间存在巨大差距。我认为我的问题是绝对的立场，但我不确定如何解决它。

继承我的代码菜单，滑块，图片：

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

这是所有那些无法在发布的代码中看到问题的人的链接。我真的很感激你的帮助。 LG Lyro

.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

可以使用媒体查询修复此问题。可以根据设备尺寸减少位置。

Answer 2

我没有看到您提供的链接。但是在您的HTML中，只需按照您希望的方式保存订购的内容即可。＆＃34;三张图片＆＃34;你想要的滑块下面应该只是直接在它下面。为什么你要把绝对的东西定位？在CSS中，滑块和三个图像应该是相对的或静态的，而不是绝对的。

<强> HTML：

<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>


<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> 

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

<强> CSS：

.rslides {
    position: relative; /*This changed*/
    list-style: none;
    overflow: hidden;
    width: 75%;
    max-height: 88%;
    top: 0;
    left: 12.5%;
    padding: 0;
    margin: 0;
    z-index: -1;
    float: left;
}
#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;*/ /*Avoid this*/
    top: 88%;
    left: 12.5%;
}
#standort {
    background-color: yellow;
    height: 32%;
    width: calc(75%/3);
    /*position: absolute;*/ /*Avoid this*/
    top: 88%;
    left: 37.5%;
    opacity: 0.85;
}
#öffnungszeiten {
    background-color: orange;
    height: 32%;
    width: calc(75%/3);
    /*position: absolute;*/ /*Avoid this*/
    top: 88%;
    left: 62.5%;
    opacity: 0.85;
}

响应性容器流动性

2 个答案: