所以在過去的 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>
2 回答
德瑪西亞99
TA貢獻1770條經驗 獲得超3個贊
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
- 2 回答
- 0 關注
- 130 瀏覽
添加回答
舉報
0/150
提交
取消