网格不会更改div位置

因此,过去30分钟我一直在尝试构建网格,但似乎无法使其正常工作。我已经在沙盒上尝试过这段代码,并且在那里工作了。我不明白为什么它不能在我的页面上工作。发生的情况是所有div相互放置,而我希望它们彼此相邻。

怎么了:

div1

div2

div3

我想发生的事情:

div1 div2 div3

<div class="jar-lists-wrapper slide-in">
        @foreach($folders as $folder)
        <div class="jar-lists hidden" data-name="{{$folder}}">
            <div class="jar-list box" data-name="{{$folder}}">
                <div class="box-header with-border">
                    <h1 class="box-title">{{$folder}}</h1>
                </div>
                <div class="box-body">
                    <div class="jar-children">
                        @foreach($jars as $jar)
                        @if(strpos($jar, strtolower($folder)) !== false)
                        <div>
                            <h3 class="jar-title">Version:
                                {{str_replace(array(strtolower($folder) . '-', '.jar'), '', $jar)}}
                            </h3>
                            <form action="{{ route('server.settings.jar.switch', $server->uuidShort) }}" method="POST">
                                @if(str_replace('.jar', '', $jar) == $currentJar)
                                <br><button class="btn btn-success" type="submit">Installed</button>
                                @else
                                <br><button class="btn btn-primary" type="submit">Install</button>
                                @endif
                            </form>
                            <br>
                        </div>
                        @endif
                        @endforeach
                    </div>
                </div>
                <div class="box-footer">
                    <a href="#" class="jars-more">View More<i class="fa fa-caret-down"></i></a>
                </div>
            </div>
        </div>
        @endforeach
    </div>

这是我的CSS:

.main {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 2em
}

.jar-lists-wrapper {
    position: relative;
    display: block
}

.jar-lists {
    position: relative;
    margin-bottom: 60px;
    margin-top: 30px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 32.5%);
    justify-content: space-between;
    z-index: 1
}

.jar-lists.hidden {
    display: none
}

.jar-list {
    text-align: center;
}

.jar-title {
    font-size: 16px;
    color: #5e5e5e
}

.jars-more {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center
}

.jars-more {
    padding: 10px 0;
    font-size: 18px;
    color: gray;
    cursor: pointer
}

.jars-more i {
    margin-left: 10px
}

@media screen and (max-width:1250px) {
    .jar-lists {
        grid-template-columns: repeat(2, 47%)
    }

    .jar-list {
        margin-bottom: 30px
    }
}

@media screen and (max-width:900px) {
    .jar-lists {
        grid-template-columns: repeat(1, 100%)
    }
}
评论
爱只为她
爱只为她

Try specifying gird-template-spacing from 32.5% to 1fr.

点赞
评论
CF100
CF100

div are block level element so they appears horizontally. So use display:inline-block and width

.child {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>1</div>
  <div class='child'>1</div>
</div>

You can also use flex

.parent {
  display: flex;
  flex-direction: row;
}

.child {
  border: 2px solid green;
  width: 150px;
}
<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>1</div>
  <div class='child'>1</div>
</div>
点赞
评论