0

我一直在尝试结合 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%;

}
4

1 回答 1

0

绝对定位的 div 不会调整到父大小，只要您不设置开始和结束位置，例如left、right和。topbottom

为您的案例尝试以下 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;    
}

编辑：固定缩放问题

于 2013-06-06T11:31:23.127 回答