当前位置: 首页 > news >正文

css布局之flex应用

左右分割,左边占90%,右边占10%
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/bf85511b632648f6a29b13b495dfc03f.p

		/*父  100*/.parent-div {/* 这里添加你想要的属性 */display: flex;flex-direction: row; //行justify-content: space-between; //左右对齐align-items: center;flex-wrap: wrap; //换行}/*中 90 +10 */.middle-div {/* 这里添加你想要的属性 */display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;}/*子 每一个小div */.son-div {/* 这里添加你想要的属性 */flex-direction: row;margin: 5px 10px;}
<div class="form-group parent-div"   ><div class="middle-div" style="width: 90%; justify-content: left;"><div class="son-div"><a  class="search-button"  >导出</a></div><div class="son-div"><input type="text" id="dc_ids"   class="form-control" style="width: 185px;" ></div>                         </div><div class="middle-div"  style="width: 10%;justify-content: right;flex-direction: row"><div class="son-div"><a  class="search-button"  >读卡</a></div><div class="son-div"><a  class="search-button"  >查询</a></div></div></div>
http://www.lryc.cn/news/380094.html

相关文章:

  • 树莓派4B设置AP热点步骤
  • Java程序之百鸡百钱问题
  • Mybatis——动态sql
  • 可视化大屏开发系列——页面布局
  • Python statistics 模块
  • wireshark常见使用表达式
  • 用Java获取键盘输入数的个十百位数
  • 第10章 启动过程组 (制定项目章程)
  • html侧导航栏客服栏
  • Clonable接口和拷贝
  • 关于小蛋の编程和小蛋编程为同一作者的说明
  • 大数据平台之Spark
  • How to use ModelSim
  • 【专业英语 复习】第8章 Communications and Networks
  • 运行vue3项目相关报错
  • 2024年6月计算机视觉论文推荐:扩散模型、视觉语言模型、视频生成等
  • Centos Stream9 和Centos Stream10的下载网址
  • chrome 录制器及性能分析工具的使用
  • 如何打造稳定、好用的 Android LayoutInspector?
  • C++ Thead互斥量死锁,mutex如何防止死锁---C++11多线程快速学习
  • Ubuntu 之Glade图形化设计器
  • 152. 乘积最大子数组
  • proactor模式
  • Charles抓包工具
  • RabbitMQ如何保证消息可靠
  • 学习笔记——路由网络基础——路由的高级特性
  • 网络编程之XDP、TC和IO_URING以及DPDK
  • 晶谷高温烧结导电浆料用低熔点玻璃粉 晶谷耐高温导电漆导电油墨高温玻璃粉
  • 【Mysql】DQL操作单表、创建数据库、排序、聚合函数、分组、limit关键字
  • Excel 常用技巧(四)