Fatal编程技术网
  • javascript/
  • Javascript 为什么在放大或缩小时，我的.infobox没有调整到父级？

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

javascript jquery html css jquery-ui

Javascript 为什么在放大或缩小时，我的.infobox没有调整到父级？,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我一直在尝试结合JQuery创建这种新闻滑块。我并不关心如何让交互正常工作，但我的信息框（一个div，其中包含“Prev”和“Next”锚定标记）没有调整大小以适应其父div的总宽度。我已尝试修复父div的宽度，并尝试为子div提供100%的最大宽度。这只是将div的大小调整为我的信息框中文本的长度。我只是个新手，所以我肯定在CSS中犯了很多错误 这是我的密码！如果你愿意帮助我，可能会派上用场： <body> <img class="start" src="stb-

我一直在尝试结合JQuery创建这种新闻滑块。我并不关心如何让交互正常工作，但我的信息框（一个div，其中包含“Prev”和“Next”锚定标记）没有调整大小以适应其父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>

绝对定位的div不会调整到父级大小，只要不设置开始和结束位置，如
左
、
右
、
顶部
和
底部

请针对您的案例尝试以下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;    
}
编辑：修复了缩放问题

你能做一个调整吗？我有！它是！只是不知道我做得对不对。我忘了提到的是，我在JQuery中使用了Mike Alsup的cycle插件。这可能是因为它没有显示我试图通过隐藏另一个img来显示的单个img，因为它们溢出div。相反，它显示了其中的每一个img。我更喜欢备选img，因为它实际居中，并且在我尝试缩放时保持在这个位置。我的想法是，稍微不透明的信息框将放置在img的宽度上。如果没有position属性，我还能做到吗？Fariz，看看这个，基于你的小提琴。神圣的粪，太棒了！你做了什么？我应该如何改变代码的处理方式？我想变得更好，所以请告诉我！在
#index
上使用
max width
和
position:relative
，然后在
.infobox
上应用
底部：0
和
width:100%
。你帮了大忙！丹杰！ 
.infobox{
  bottom: 0;    
  font-weight: bold;
  width: 100%;
  height: 10%;
  float:left;    
}