小编Pre*_*ake的帖子

css3规模周围的白色空间

我有一个小问题我想解决,但找不到任何好的答案:

当我在div(包含其他div)上使用刻度时,它会在我的div的"原始"宽度和高度周围留下白色空间:

在此输入图像描述

如何在缩放时删除div周围的空间?

如果需要我可以使用js!

编辑:这是一些代码:

HTML

<div class="pull-right nextpack">

                    <div class="quarter scale-thumb">

                        <div class="up">
                            <div class="inner" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                        </div>

                        <div class="face">
                            <div class="top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                            <div class="bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                        </div>

                        <div class="cote-droit">
                            <div class="inner">
                                <div class="cote-droit-top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                                <div class="cote-droit-bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                            </div>
                        </div>

                    </div>


                </div>
Run Code Online (Sandbox Code Playgroud)

CSS (你真的不需要知道包是怎么做的,它是很多css3什么都没有,基本上只是倾斜,旋转,缩放以从平面模板进行3D渲染)

.quarter.scale-thumb
{
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
Run Code Online (Sandbox Code Playgroud)

PS:第一张照片是我不添加scale-thumb类的时候

css scale

48
推荐指数
5
解决办法
4万
查看次数

使用Eloquent对数据进行排序

我是laravel的新手(从CI换掉),雄辩的ORM在某些方面仍然有点神秘!

这是我的问题:

我想使用Eloquent从我的数据库中对数据进行排序.

我有一个表和一个表评论(帖子有很多评论和评论属于帖子)

每条评论都有一个时间戳(=> created_at字段),我想订购如下内容:

(我们在profil页面上,所以$ user-> id是用户的id(显然))

我希望该用户发表评论的帖子中的每个帖子,并通过评论的created_at字段对所有帖子进行排序

我真的想完全使用Eloquent,或者至少是流利的,我不知道这样做的正确方法.

我希望我很清楚,谢谢你的时间!

sorting laravel

12
推荐指数
1
解决办法
3万
查看次数

Laravel和Infinite Scroll

我有一个关于laravel分页和无限滚动的问题:

首先,我有这个:

<div class="row">   

<div id="boxes">

    @forelse($duels->results as $d)

        <div class="col-span-4 box notizy">

            @include('versus.versus')

        </div>



    @empty



    @endforelse

</div>

<div class="col-span-12">
    <div class="paginate text-center">
        {{$duels->links()}}
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我们可以看到,我有一个包含div .box的div #box.分页由Laravel设置,如下所示:

<div class="col-span-12">
    <div class="paginate text-center">
        <div class="pagination">
            <ul>
                <li class="previous_page disabled"><a href="#">&laquo; Previous</a></li>
                <li class="active"><a href="#">1</a></li> <li><a href="index.php?page=2">2</a></li>
                <li class="next_page"><a href="index.php?page=2">Next &raquo;</a></li>
            </ul>
            </div>      
      </div>
</div>
Run Code Online (Sandbox Code Playgroud)

所以现在,我想要一个无限卷轴而不是一个分页.我应该如何使用https://github.com/paulirish/infinite-scroll

如果你有疑问,我会待在这里!

PS:我尝试了一些但没有一个像以下那样工作:

    $('#boxes').infinitescroll({
    loading: {
        finished: undefined,
        finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
        msg: null,
        msgText: "<em>Loading the next …
Run Code Online (Sandbox Code Playgroud)

jquery laravel laravel-4

11
推荐指数
2
解决办法
1万
查看次数

链式变换动画不具有动画效果

在处理动画时,我遇到了一个没有记录的意外行为:

当使用transform(任何转换属性,仅转换属性)链接动画时,第一个动画将具有从状态A转换到状态B的预期行为,而第二个动画将从B转到C而没有任何转换.

  div {
    background:red;
    width:100px;
    height:100px;
    -webkit-animation: in 2s, out 2s 3s forwards;
    animation: in 2s, out 3s 2s forwards;
}
@keyframes in {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes out {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.5);
    }
}
@-webkit-keyframes in {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-webkit-keyframes out {
    from {
        -webkit-transform: scale(1);
        
    }
    to {
        -webkit-transform: scale(.5);
    }
}
Run Code Online (Sandbox Code Playgroud)
<div></div>
Run Code Online (Sandbox Code Playgroud)

我知道在这种特殊情况下,事情可以一步完成,但这不是我正在寻找的解决方案 …

css transform css-transitions css-animations

8
推荐指数
1
解决办法
264
查看次数