首页 > 其他分享 >自适应何必媒体查询

自适应何必媒体查询

时间:2023-06-01 14:57:11浏览次数:41  
标签:设置 items 查询 适应 start 宽度 grid 5px 何必

自适应何必媒体查询

简单的自适应可以使用grid布局的grid-template-columns和grid-gap属性实现
例如:要实现一行三个div并自适应宽度,同时使用justify-items和align-items属性实现靠左,并使用margin属性实现中间间隔。

HTML代码:

<div class="grid-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(474px, 1fr));
  grid-gap: 5px;
  justify-items: start;
  align-items: start;
}

.box {
  height: 200px;
  margin-right: 5px;
  margin-bottom: 5px;
  background-color: #ccc;
}

解释:

  • .grid-container: 设置为grid布局,使用grid-template-columns属性设置每一列的宽度为minmax(474px, 1fr),即最小宽度为474px,最大宽度为1fr(即自适应宽度)。使用grid-gap属性设置列与列之间的间隔为5px。同时使用justify-items为start,align-items为start,使子元素靠左对齐。
  • .box: 设置高度为200px,同时设置右边距和下边距为5px,使子元素之间有间隔。设置背景颜色为灰色。

标签:设置,items,查询,适应,start,宽度,grid,5px,何必
From: https://www.cnblogs.com/yx-liu/p/17448981.html

相关文章

  • 使用JPA实现分页和模糊查询
    1、首先创建DAO层接口,实现JpaRepository和JpaSpecificationExecutor两个接口JpaRepository<SysOperLog,Integer> 泛型参数分别是:要查询的实体(Entity),实体的主键类型JpaSpecificationExecutor<SysOperLog> 泛型参数:要查的实体 @RepositorypublicinterfaceSysOperLogReposit......
  • 解决mybatis-plus查询字段中含有关键词时异常问题
    在使用mybatis-plus查询mysql某张表的数据时,一直告警提示sqlsyntaxerror。于是,把异常提示里的sql语句复制到navicat执行,也提示sqlsyntaxerror。仔细看了下,发有几个字段在navigate里面标示为蓝色(这几个字段为sensitive、status、name),这几个字段在mysql里面是关键词。在查询语......
  • Doris(六) -- 查询语法和内置函数
    查询语法和内置函数查询语法整体结构SELECT[ALL|DISTINCT|DISTINCTROW]--对查询字段的结果是否需要去重,还是全部保留等参数select_expr[,select_expr...]--select的查询字段[FROMtable_references[PARTITIONpartition_list]......
  • mongocxx c++ 14标准,进行多表联合查询
     #include<mongocxx/client.hpp>#include<mongocxx/instance.hpp>#include<mongocxx/uri.hpp>#include<bsoncxx/builder/stream/document.hpp>#include<bsoncxx/json.hpp>#include<bsoncxx/types.hpp>usingbsoncxx::builder::s......
  • MyBatis+Sharding-JDBC实体类LocalDateTime类型字段查询报SQLFeatureNotSupportedExce
    问题最近协助渠道组开发新需求,封装实现了一个公共模块供不同渠道项目使用。以前各个渠道项目有很多相似的菜单和功能,各自项目里自己的代码实现,本公共模块对新需求的功能点进行抽象,减少重复代码,提高模块复用性和可维护性。目前有2个渠道项目接入了该公共模块,自测时发现其中1个运......
  • mysql使用索引优化查询效率
    索引的概念索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),包含着对数据表里所有记录的引用指针。通俗的来讲,数据库索引好比是一本书前面的目录,能加快数据库的查询速度。在没有索引的情况下,数据库会遍历全部数据后选择符合条件的;而有了相应的索引之后,数据库会......
  • IP地址查询区域名或IP归属地
    方式一:IP-API.com-GeolocationAPI-Documentation-JSON方式二:使用强大的离线IP地址定位库ip2region获取城市信息-阿里云开发者社区(aliyun.com)参考地址:Python:免费IP归属地查询接口-阿里云开发者社区(aliyun.com)......
  • 怎样查询域名的基本信息?
    小编经常收到站长们咨询如何查询域名ICP备案、域名年龄、域名注册邮箱等问题。在这里,我想分享一些如何应用iis7的站长工具来查询这些信息的方法。首先,我们需要了解什么是ICP备案。ICP备案是指网站在中国大陆地区备案,颁发备案号,以备监管部门进行网站管理和监管的一项制度。如果网站......
  • 9. 子查询/INSERT/UPDATE/DELETE/REPLACE(未完成)
    一.子查询子查询就是指在一个select语句中嵌套另外一个select语句。同时子查询必须包含括号。MySQL5.6之前,子查询的性能较差,但是从5.6开始,不存在性能差的问题。selectafromt1wherea>any(selectafromt2);1.selectafromt1是外部查询(outerquery)2.(selectafro......
  • 以高度的精度提高无监督领域适应的有效性
    文章的主要内容同时,提出了一种改进的主动学习查询策略,以准确选择目标域中新增加的健康类别样本来辅助模型训练,解决标签域扩展的问题。近年来,一些研究人员利用样本选择算法在目标域中提取信息量大的样本来辅助模型训练,用于提高无监督模型的诊断性能。该方法首先利用UDA模型学习领......