css div上下左右排序
生活随笔
收集整理的這篇文章主要介紹了
css div上下左右排序
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div上下左右排序</title>
</head>
<style>.div-box {display: grid;grid-auto-flow: column; /* 排序方式： column-先列后行， row-先行后列 */grid-template-columns: repeat(4, 207px); /* 設計列寬 */grid-template-rows: repeat(2,138px); /* 設計行高 *//* grid-template-rows: repeat(2,auto); */grid-row-gap: 24px; /* 行間距 */grid-column-gap: 177px; /* 列間距 */}.div-box2 {display: grid;grid-auto-flow: row;grid-template-columns: repeat(4, 207px);grid-template-rows: repeat(2,138px);/* grid-template-rows: repeat(2,auto); */grid-row-gap: 24px;grid-column-gap: 177px;}.div-item {background-color: #0ec885;line-height: 138px;text-align: center;}
</style>
<body>
<h2>排列：先列后行</h2>
<div class="div-box"><div class="div-item">1</div><div class="div-item">2</div><div class="div-item">3</div><div class="div-item">4</div><div class="div-item">5</div><div class="div-item">6</div>
</div>
<h2>排列：先行后列</h2>
<div class="div-box2"><div class="div-item">1</div><div class="div-item">2</div><div class="div-item">3</div><div class="div-item">4</div><div class="div-item">5</div><div class="div-item">6</div><div class="div-item">7</div><div class="div-item">8</div>
</div>
</body>
</html>
總結
以上是生活随笔為你收集整理的css div上下左右排序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 曙光天阔服务器i840安装系统,曙光天阔
- 下一篇： img标签保持纵横比html,无论容器如