Question

我一直在尝试与JQuery结合创建这个新闻滑块。我不关心让交互工作，但我的信息框，它是一个div，包含“上一个”和“下一个”锚标签不会调整大小以适应其父div的总宽度。我试图修复父宽度并尝试给子div最大宽度为100％。这只将div重新调整为我的信息框内文本的长度。我只是一个新手，所以我一定在CSS中犯了很多错误。请和我一起露面，把我当作你的学生！

这是我的代码！如果你愿意帮助我，可能会派上用场：

<body>

    <img class="start" src="stb-logo.png">

    <div id="index">
        <h3 align="center">Nieuws</h3>    
            <div id="ticker">
                <img src="no-image-available.jpg">
                <img src="no-image-available.jpg">
                <img src="no-image-available.jpg">
                <img src="no-image-available.jpg">
            </div>
        <div class="infobox">
            <div>Some text to describe the image</div>
            <a id="prev2" href="#">Prev</a>
            <a id="next2" href="#">Next</a>
        </div>
    </div>

    <article>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut risus lectus, vestibulum et euismod vel, aliquet in dolor. Aliquam blandit, dolor eget rhoncus vestibulum, enim metus convallis quam, nec commodo arcu mauris eget quam. Aliquam aliquam mollis condimentum. Fusce pretium tortor augue. Sed erat enim, congue sit amet congue sit amet, adipiscing quis metus. Nulla et elit quis dolor malesuada tincidunt.Vivamus ultricies lectus auctor dui condimentum ut luctus nunc scelerisque. Etiam semper tristique orci, sit amet suscipit purus eleifend ullamcorper. Etiam ullamcorper pretium varius. Aliquam quis urna metus.
    </article>

</body>

这是我的CSS！

body{
    font-family: Verdana;
}

header.nav {
    width: 100%;
    display: inline-block;
}

img.start{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
    background-color: grey;
}

div#index{
    position: relative;
    max-width: 50%;
    text-align: center;
    margin: auto;
    display: block;
    clear: inherit;
}

div#ticker{
    margin: auto;
    display: block;
    overflow: hidden;
}

div#ticker img{
    z-index: -1;
    max-width: 100%;
    max-height: 100%;
}

.infobox{
    bottom: 0;
    z-index: 80;
    font-weight: bold;
    width: 100%;
    height: 10%;
    position: absolute;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.6);
}

.infobox > div{
    max-width: 100%;

}

提前致谢！

Fariz

Answer 1

绝对定位的div不会调整为父级大小，只要您不设置开始和结束位置，例如left，right，top和{{ 1}}。

根据您的情况尝试以下CSS：

bottom

或者您可以删除显示：绝对，并使用以下css作为信息框：

body {
  font-family: Verdana;
  font-size:10px;
}

header.nav {
  width: 100%;
  display: inline-block;
}

img.start {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
  background-color: grey;
}

div#index {
  position: relative;
  max-width: 800px;   
  margin: auto;
  display: block;
  clear: inherit;
}

div#ticker {
  margin: auto;
  display: block;
  overflow: hidden;
  float:left;
}

div#ticker img {
  z-index: -1;
  max-width: 100%;
  max-height: 100%;
 }

.infobox {
  bottom: 0;    
  font-weight: bold;
  width: 100%;
  height: 10%;
  position:absolute;
  left:0;
  right:0;
  }

.infobox #prev2 {
 float:left;
 display:block;
}
.infobox #prev2 {
 float:right;
 text-align:right;
 display:block;
}

.infobox > div{
  max-width: 100%;
  text-align: center;
  }

article {
 clear:both;
  }

编辑：修正了缩放问题

为什么我的.infobox在放大或缩小时没有调整为父级？

1 个答案: