apple官网头部

最新推荐文章于 2024-08-19 15:07:37 发布

sunshinefcc

最新推荐文章于 2024-08-19 15:07:37 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： sass

本文链接：https://blog.youkuaiyun.com/github_37213295/article/details/86570385

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用CSS Grid布局的HTML示例，展示了如何通过简单的代码实现元素的网格排列。通过定义.grid容器和.grid-item子元素的样式，可以轻松创建响应式和美观的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Toubu.html

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

Toubu.scss

练习

.box{

  text-align: justify;

  height: 40px;

}

.box .item{

  //float: left;

  display: inline-block;

  //background: #10baca;

  font-size: 30px;

}

.box::after{

  content: '';

  display: inline-block;

  width: 100%;

  height: 0;

  font-size: 0;

  line-height: 0;

}