为什么当我放大或缩小时，我的.infobox没有调整大小

Why is my .infobox not resizing to parent as I zoom in or out?

本文关键字：infobox 调整 我的 放大 小时 缩小 为什么      更新时间：2023-09-26

我一直在尝试与JQuery结合创建这种新闻滑块。我不担心得到交互工作，但我的信息框，这是一个div，其中包含"前"answers"下"锚标签是不调整大小，以适应其父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%;
}

绝对位置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;    
}
编辑:

固定缩放问题

相关文章：