Question

我正在创建Isotope布局，以使其响应我已经创建了具有悬停字幕效果的列宽百分比单位。除响应模式外，一切正常。我想根据div的父宽度自动更改标题的底部，但我不知道如何存档。你能帮我吗？

HTML

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item item-width2">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/RVHcLal.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada, nulla lacus rhoncus nisi, nec fringilla massa urna quis eros. Integer faucibus placerat dui sit amet volutpat. Curabitur suscipit rhoncus lectus, sit amet fermentum lacus interdum sed.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
    </div>
    <!-- end blog-container -->
</div>
<!-- end blog-section -->

CSS

#blog-container{
    max-width: 1140px;
}

    #blog-container:after{
        content: '';
        clear: both;
        display: block;
    }

figure{
    float: left;
    position: relative;
    overflow: hidden;
    height: auto;
}

figcaption{
    position: absolute;
    bottom: -71%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    padding: 10px;
    overflow: hidden;
    transition: bottom .5s;
    color: #615b51;
}

    figcaption h2,
    figcaption .title p{
        margin: 0;
        text-transform: uppercase;
    }

.item-width2 figcaption{
    bottom: -86%;
}

    figcaption:hover{
        bottom: 0;
    }

.item,
.item-sizer{
    width: 19.298%;
    height: auto;
}

.item-width2{
    width: 39.5%;
}

.item{
    float: left;
    margin-bottom: 12px;
}

@media(max-width: 736px){
    .item,
    .item-sizer,
    .item-width2{
        width: 48.641%;
    }
}

JS

var $container = jQuery('#blog-container');

$container.isotope({
    itemSelector : '.item',
    percentPosition: true,
    layoutMode: 'masonry',
    masonry:{
        columnWidth: '.item-sizer',
        gutter: 10
    }
});

Answer 1

据我所知，您的问题是，当页面变得更窄并且应用了@media规则时，所有切片都会获得相同的维度，但标签（figcaption）却不会。 / p>

您是否尝试将相同的bottom值应用于figcaption规则中的所有@media代码？

@media(max-width: 736px){

    ...

    figcaption {
        bottom: -71%; // Set the value you want all them to have
    }
}

如果您最终拥有更复杂的样式，并且在尝试将该规则应用于网页中所有不同的figcaption代码时遇到问题，则必须检查这些规则的CSS specificity并设置@media块内更具体的一个。您可以使用此工具检查：http://specificity.keegan.st/

您还可以使用bottom（或任何其他）媒体资源上的!important annotation。

修改

如果您想使bottom属性值取决于切片的尺寸，您应该在%中设置其值，或者您也可以使用calc()来执行某些操作（+，-，*，/）与%以及任何其他不同的单位（例如bottom: calc(71% - 1em)）。

您还可以针对不同的页面宽度使用多个CSS媒体查询：https://css-tricks.com/css-media-queries。

根据与父母的div自动更改底部

1 个答案: