Question

我有一个父div，里面有div，我想设置为与父div相同的大小。父div设置为内联块。我怎样才能做到这一点？ https://jsfiddle.net/7twc7jy0/

<div class= "parent">
   <div class="caption">
      <h4>Thumbnail Headline</h4>
      <p>short thumbnail description</p>
   </div>
   <img class="project-img" src="https://i.imgur.com/UnxgcnT.png" >
</div>

的CSS：

.project-img{
  width:400px;
  height: auto;
}

.parent{
  display:inline-block;
}

.caption {
    position:absolute;
    background:rgba(66, 139, 202, 0.75);
    height:100%;
    width:100%;
    padding:0%;
    margin:0%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

JS：

$('.parent').hover(
    function(){
        $(this).find('.caption').fadeIn(150)
    },
    function(){
        $(this).find('.caption').fadeOut(150); //.fadeOut(205)
    }
);

Answer 1

您必须在父div上添加相对位置

<body>
    <div class="fade-right-1">
        <div class="container">
            <div class="photo-text">
                 <span>All rights to NASA</span>
            </div>
        </div>
    </div>
    <div class="fade-right-2">
        <div class="container">
            <div class="photo-text">
                <span>All rights to NASA</span>
            </div>
        </div>
    </div>
    <div class="fade-right-3">
        <div class="container">
            <div class="photo-text">
                <span>All rights to NASA</span>
            </div>
        </div>
    </div>
</body>
<script>
$(document).ready(function() {
    function animateDivers() {
        $(".fade-right-1").animate({
            left: 200,
            opacity: "show"
        }, 1500);
        $(".fade-right-2").delay(1000).animate({
            left: 200,
            opacity: "show"
        }, 1500);
        $(".fade-right-3").delay(2000).animate({
            left: 200,
            opacity: "show"
        }, 1500);

        $(".fade-right-1,.fade-right-2,.fade-right-3").delay(2000).animate({
            left: 500,
            opacity: "hide"
        }, 1500, animateDivers, 2500);
    }

    animateDivers();
});
</script>

这应该做的工作

Answer 2

你应该像这样设置父母：

.parent {
    padding:0%
}

Div设置为100％宽度和100％高度，但不是继承父div的大小

2 个答案: