时间戳

首页 > 解决方案 > 这可以使用 CSS3 实现吗？

html - 这可以使用 CSS3 实现吗？

问题描述

我将要向您展示的图像显示了我想要在我的网站上上传的图像的布局。

在此处输入图像描述

不幸的是，我目前正在后端通过创建 4 个 flex-box 列来实现这一点，然后循环遍历所有图像并将它们分成 4 组。然后我遍历每个组并在 1 列中显示该组。结果是：

image 1进去column 1，

image 2进去column 2，

image 3进去column 3，

image 4进去column 4，

然后

image 5column 1再次进入

image 6进去column 2

即使我明白，为了实现一些样式而在后端做如此苛刻的事情是非常非常不明智的，这就是为什么我一直想知道我是否可以使用纯 CSS3 来实现这一点。

我决定也上传我的后端代码，这使我能够实现这一目标。

<div class="flex-grid-home">
@php($count = 0)
@foreach($images as $image)
    @if ($count % 4 == 0)
        @php($images1[] = $image)
    @elseif($count % 4 == 1)
        @php($images2[] = $image)
    @elseif($count % 4 == 2)
        @php($images3[] = $image)
    @else
        @php($images4[] = $image)
    @endif
    @php($count++)
@endforeach

<div class="col-home-1">
@if (!empty($images1))
    @foreach($images1 as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                @auth
                <div class='votingContainer'>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                    <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                </div>
                @endauth
            </div>
        </div>
    @endforeach

@endif
</div>

<div class="col-home-2">
@if (!empty($images2))
    @foreach($images2 as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                @auth
                <div class='votingContainer'>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                    <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                </div>
                @endauth
            </div>
        </div>
    @endforeach
@endif
</div>

<div class="col-home-3">
    @if (!empty($images3))
            @foreach($images3 as $image)
                <div class='imageContainer'>
                    <div class="stickyContainer blackGradient">
                        <h1 class='imageTitle'>{{$image->name}}</h1>
                        <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                        <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                        @auth
                        <div class='votingContainer'>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                            <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                        </div>
                        @endauth
                    </div>
                </div>
            @endforeach
    @endif
</div>

<div class="col-home-4">
    @if (!empty($images4))
            @foreach($images4 as $image)
                <div class='imageContainer'>
                    <div class="stickyContainer blackGradient">
                        <h1 class='imageTitle'>{{$image->name}}</h1>
                        <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                        <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                        @auth
                        <div class='votingContainer'>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                            <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                        </div>
                        @endauth
                    </div>
                </div>
            @endforeach
    @endif
</div>

</div>

标签： htmlcss

解决方案

是的，它可以实现。你必须学习 CSS-grid 才能以这种方式设计它。看看这个：在 5 分钟内学习 CSS 网格

另外，首先使用背景颜色，以使任务更容易一些，然后您有两个选择：

  1. 将图像放在那些div.
  2. 使用background: url('image.png');财产。

如果您想在 vanilla CSS 中执行此操作，请按照以下步骤操作：

  1. div用class='column', 现在在 CSS 中创建 4

.column { width: 25vw; //here 25 because, since we have 4 columns(100/4=25) }

  1. 放置div在具有100%宽度的列内，以及您想要的任何高度。

推荐阅读