所以在過(guò)去的 30 分鐘里，我一直在嘗試制作一個(gè)網(wǎng)格，但我似乎無(wú)法讓它工作。我已經(jīng)在沙盒上嘗試了這段代碼并且它在那里工作。我不明白為什么它在我的頁(yè)面上不起作用。發(fā)生的是所有 div 都放在彼此下面，我希望它們彼此相鄰。會(huì)發(fā)生什么：分區(qū)1分區(qū)2分區(qū)3我想要發(fā)生的事情：分區(qū) 1 分區(qū) 2 分區(qū) 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貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
div 是塊級(jí)元素，因此它們水平顯示。所以使用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>
您還可以使用網(wǎng)格
.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 關(guān)注
- 136 瀏覽
添加回答
舉報(bào)
0/150
提交
取消