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

【问题标题】：Why is my .infobox not resizing to parent as I zoom in or out?当我放大或缩小时，为什么我的 .infobox 没有调整为父级？
【发布时间】：2019-08-11 04:05:41
【问题描述】：

我一直在尝试结合 JQuery 创建这种新闻滑块之类的东西。我不关心让交互工作，但我的信息框，它是一个 div，包含“Prev”和“Next”锚标记没有调整大小以适应其父 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%;

}

【问题讨论】：

你能发一个jsFiddle吗？
我有！ Here 是！只是不知道我做得对不对。我忘了提到的是，我使用了 Mike Alsup 的 JQuery 循环插件。可能是因为它没有显示我试图通过隐藏另一个img来显示的这个单一的img，因为它们溢出了div。相反，它会显示其中的每一个。

标签： javascript jquery html css jquery-ui

【解决方案1】：

绝对定位的 div 不会调整到父尺寸，只要您不设置开始和结束位置，例如 left、right、top 和 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;
  }

或者您也可以删除 display:absolute，并为信息框使用以下 css：

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

编辑：修复缩放问题

【讨论】：

我更喜欢替代方案，因为它实际上居中并在我尝试缩放时保持在这个位置。我的想法是将具有轻微不透明度的信息框放置在 img 的宽度上。如果没有 position 属性，我仍然可以实现这一点吗？
Fariz，看看这个working example，根据你的小提琴。
圣粪，太棒了！你做了什么？我应该改变我处理代码的方式？我想变得更好，所以请告诉我！
在#index 上使用max-width 和position:relative，然后在.infobox 上应用bottom:0 和width:100%。
你帮了大忙！太棒了！