网格不会改变 div 位置

Question

所以在过去的 30 分钟里，我一直在尝试制作一个网格，但我似乎无法让它工作。我已经在沙盒上尝试了这段代码并且它在那里工作。我不明白为什么它在我的页面上不起作用。发生的是所有 div 都放在彼此下面，我希望它们彼此相邻。会发生什么：分区1分区2分区3我想要发生的事情：分区 1 分区 2 分区 3<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>

Answer 1

div 是块级元素，因此它们水平显示。所以使用display:inline-block和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>

您也可以使用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>

您还可以使用网格

.parent {

  display: grid;

  grid-template-columns: repeat(3, 1fr)

}

.child {

  border: 1px solid red;

}

<div class='parent'>

  <div class='child'>1</div>

  <div class='child'>1</div>

  <div class='child'>1</div>

  </div

Answer 2

尝试gird-template-spacing将 32.5% 指定为 1fr。