1

我正在尝试将响应式绝对定位图像放置在相对 div 内。我已经在两次潜水周围放置了边界以可视化问题。右边那个不包。另外，我想将图像导航保留在图像中间。

主要目标是保持包装 div 响应和包装图像的大小 - 当图像大小在窗口调整大小时发生变化时。

在这里您可以在 codepen 中看到问题 - http://codepen.io/GlupiJas/pen/PwrLbb

在此处输入图像描述

广告.css

body{

}
.wrapper{
    width: 80%;
    margin: 100px auto;
}
.advert{
    position: relative;
    height: 100%;
}
.advert img{
    position: absolute;
}

.advert button{
    position: absolute;
    visibility: hidden;
}
.advert:hover button{
    visibility: visible;
}

.advert button#advertCloseButton{
    top: 0px;
    right: 0px;
}
.advert button#advertNextButton{
    bottom:50%;
    left:0px;
}
.advert button#advertPreviousButton{
    bottom:50%;
    right:0px;
}
.advert button#advertStopButton{
    bottom:0px;
    right:0px;
}
.advert button#advertPlayButton{
    bottom:0px;
    right:0px;
}

.border{
    border: 1px solid gray;
}

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title of the document</title>
    <!-- jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Bootstarp 3 Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- Bootstarp 3 Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <!-- Bootstarp 3 Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!-- custom css -->
    <link rel="stylesheet" type="text/css" href="advert.css">
    <script src="js/advert.js"></script>
</head>

<body>
  <div class="wrapper">
    <div class="row">
      <div class="col-xs-12 col-md-8 border">
        .col-xs-12 .col-md-8
      </div>
      <div class="col-xs-12 col-md-4 border">
        <div class="advert">
            <img class="img-responsive" src="http://placehold.it/300x300.jpg" alt="Smiley face" height="" width="100%">
            <img class="img-responsive" src="http://placehold.it/300x300.jpg" alt="Smiley face" height="" width="100%">
            <img class="img-responsive" src="http://placehold.it/300x300.jpg" alt="Smiley face" height="" width="100%">
            <button id="advertCloseButton" type="button" class="btn btn-danger">X</button>
            <button id="advertNextButton" type="button" class="btn btn-danger">></button>
            <button id="advertPreviousButton" type="button" class="btn btn-danger"><</button>
            <button id="advertStopButton" type="button" class="btn btn-danger">pause</button>
            <button id="advertPlayButton" type="button" class="btn btn-danger">play</button>
        </div>
      </div>
    </div>
  </div>
</body>

<script>
$(function(){
    advert({
        closeButton: true,
        navButton: true,
        timeToShow: 100,
        timeDelay: 1000,
        timeToFade: 100
    }); 
});
</script>

</html>
4

1 回答 1

0

我很快模拟了一个演示，但您遇到的问题更多是因为您添加了许多 div（一个添加了边框的 div 和其他一些不需要的 div - 因此我必须为它们中的每一个设置 height:100% ) 并且没有为所有图像和按钮的容器设置高度。

所以可以肯定的是，如果容器设置了高度并确保您的播放按钮包含在同一个 div 中，则position:relative;对父级及其子级将起作用。position:absolute;

在这个演示中，我快速将所有父容器的高度设置为 height:100%; 向您展示高度如何影响问题。

注意要height:100%正常工作，每个父级都需要有一个固定的高度集，或者每个父级从 html 开始，body 需要有 100% 的高度。

如果您向容器添加固定高度或将 html,body 设置为 100% 高度，然后确保所有子项也具有 100% 高度，则可以解决您的问题。

演示 http://codepen.io/alexincarnati/pen/RNzvmw

于 2015-04-12T17:20:50.673 回答