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.mfbz.cn/a/725278.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

jenkins安装和使用 (二)

参考视频资料 https://www.bilibili.com/video/BV1bS4y1471A?p10&vd_sourcee0dcd147bd5d730317de804d788cd6f9 安装maven插件 新建item 配置构建信息 项目地址替换为自己的实际地址 其余保持先保持默认 先然后在主页就看到了这个项目 查看控制台输出 稍等一…

小林图解系统-二.硬件结构 2.5CPU是如何执行任务的?

CPU如何读取数据的&#xff1f; CPU访问L1 Cache速度比访问内存快100倍&#xff0c;有高速缓存的目的&#xff1a;把Cache作为CPU与内存之间的缓存层&#xff0c;减少对内存的访问频率 所有CPU Cache Line是CPU从内存读取数据到Cache的单位。 64字节 CPU加载数组里面连续的多…

Kubernetes入门-Kubernetes集群构成

目录 前言 控制面板节点与工作节点 控制面板节点 工作节点 被托管的Kubernetes 用kubectl命令行工具管理Kubernetes 前言 前面说过&#xff0c;Kubernetes是云的操作系统顾名思义&#xff0c;它位于应用和基础设施之间Kubernetes运行在基础设施上&#xff0c;而应用运行…

【Linux安装Conda环境的详细教程】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

服务器流量收发测试

文章目录 一、概述二、实现方式一&#xff1a;编码1. 主要流程2. 核心代码3. 布署 三、实现方式二&#xff1a;脚本1.脚本编写2. 新增crontab任务 四、查看结果 一、概述 我们在安装vnStat、wondershaper便想通过实际的数据收发来进行测试。 二、实现方式一&#xff1a;编码 …

外包干了2年,彻底废了...

先说一下自己的情况。大专生&#xff0c;17年通过校招进入湖南某软件公司&#xff0c;干了接近2年的点点点&#xff0c;今年年上旬&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01;而我已经在一个企业干了五年的功能测试…

UniAudio 1.5:大型语言模型(LLMs)驱动的音频编解码器

大型语言模型&#xff08;LLMs&#xff09;在文本理解和生成方面展示了卓越的能力&#xff0c;但它们不能直接应用于跨模态任务&#xff0c;除非进行微调。本文提出了一种跨模态上下文学习方法&#xff0c;使未进行进一步训练的LLMs能够在少量示例的情况下&#xff0c;无需任何…

面向机电工程和制造项目数字管理-项目一体化解决方案

一、专业面向机电工程和制造项目管理 1、项目范围管理 大多数企业有这样的经历&#xff0c;项目做了很久感觉做不完&#xff0c;就像是个无底洞。项目中哪些该做&#xff0c;哪些不该做&#xff0c;做到什么程度没有一个实际的把控。这里就会涉及到“范围管理”的概念。 2、…

[机器学习算法]决策树

1. 理解决策树的基本概念 决策树是一种监督学习算法&#xff0c;可以用于分类和回归任务。决策树通过一系列规则将数据划分为不同的类别或值。树的每个节点表示一个特征&#xff0c;节点之间的分支表示特征的可能取值&#xff0c;叶节点表示分类或回归结果。 2. 决策树的构建…

【Qt 学习笔记】Qt窗口 | 标准对话框 | 颜色对话框QColorDialog

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt窗口 | 标准对话框 | 颜色对话框QColorDialog 文章编号&#xff1a;…

IFM易福门SV7500SV4200涡街流量计型号都是进口的。

IFM易福门SV7500SV4200涡街流量计型号都是进口的。工程余料。

【docker安装rabbitmq】

docker安装rabbitmq 1.查阅rabbitmq的Dokcer Hub官方说明 rabbitmq地址&#xff0c;因为我们需要使用的是带管理界面的rabbitmq服务。所以我们需要下载的rabbitmq:management镜像 docker pull rabbitmq:management2.启动rabbitmq 2.1.快速启动 One of the important thing…

新火种AI|实属罕见!四大AI顶流同台,有哪些关键信息值得关注?

作者&#xff1a;小岩 编辑&#xff1a;彩云 在有着“AI春晚”之称的2024年智源大会上&#xff0c;非常难得的一幕出现了&#xff1a;当下国内的四大AI顶流公司——月之暗面&#xff0c;百川智能&#xff0c;智谱AI&#xff0c;面壁智能齐聚一堂&#xff0c;十分罕见的同台了…

PHP转Go系列 | 变量常量的使用姿势

大家好&#xff0c;我是码农先森。 变量 在 PHP 语言中&#xff0c;初始化变量虽然只有一行&#xff0c;其实包含了两步&#xff0c;一是声明变量&#xff0c;二是赋值给变量&#xff0c;同一个变量可以任意再赋值任何类型的数据。 <?php// 初始化变量 $name "man…

白酒:酒文化的地域特色与差异

中国的白酒文化&#xff0c;作为一种深深植根于人们生活中的文化现象&#xff0c;其发展历程深受地域特色的影响&#xff0c;从而形成了丰富多样的地域特色与差异。云仓酒庄的豪迈白酒&#xff0c;作为中国白酒的品牌&#xff0c;其背后所蕴含的地域特色与差异更是值得我们去探…

【pytorch01】简单回归问题

1.梯度下降&#xff08;Gradient Descent&#xff09; y x 2 ∗ s i n ( x ) yx^{2}*sin(x) yx2∗sin(x) y ′ 2 ∗ x ∗ s i n ( x ) x 2 ∗ c o s ( x ) y2*x*sin(x) x^{2}*cos(x) y′2∗x∗sin(x)x2∗cos(x) 求最小值要求导 梯度下降定义&#xff1a;梯度下降要迭代计…

Python接口测试实战之搭建自动化测试框架

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一.数据分离:从Excel中读取数据 之前的用例中&#xff0c;数据直接写在代码文件里&#xff0c;不…

【UML用户指南】-19-对基本行为建模-用例图

目录 1、组成结构 2、表示法 3、一般用法 3.1、对主题的语境建模 3.2、对主题的需求建模 4、常用建模技术 4.1、对系统的语境建模 4.1.1、设计过程 4.2、对系统的需求建模 4.2.1、设计过程&#xff1a; 5、正向工程 UML 中的用例图是对系统的动态方面建模的 5 种图之…

202483读书笔记|《牵牛花浮世无篱笆:千代尼俳句250》——被红叶染红的只有一侧山坡之山 啊,单恋

202483读书笔记|《牵牛花浮世无篱笆&#xff1a;千代尼俳句250》——被红叶染红的只有一侧山坡之山 啊&#xff0c;单恋 春之句夏之句秋之句冬之句 历史读过的俳句列表: 202318读书笔记|《芭蕉芜村一茶&#xff1a;俳句三圣新译300》——樱花——让一整个春夜亮起来&#xff0…

idea的右边栏maven不见了(丢了)解决方案以及idea无法识别maven项目

前言 众所周知&#xff0c;idea是java开发中不可缺少的利器&#xff0c;但是由于功能过多&#xff0c;导致奇怪的问题也很多 问题汇总 idea的右边栏maven丢了 idea无法识别maven项目 对应的解决办法 idea的右边栏maven丢了 原因可能是被自己手动移除了 或者 项目没被正确…