css布局之flex应用

news2024/10/6 22:24:34

左右分割,左边占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.coloradmin.cn/o/1839511.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

揭开AI大模型的神秘面纱:一文看懂GPT-4的核心技术

近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术迅猛发展&#xff0c;特别是AI大模型的崛起&#xff0c;给人们的生活和工作带来了深远的影响。作为其中的佼佼者&#xff0c;GPT-4备受瞩目。那么&#xff0c;GPT-4的核心技术究竟是什么&#xff1f;它是如何运作的&a…

YOLOv10改进 | 主干篇 | YOLOv10引入华为VanillaNet替换Backbone

1. VanillaNet介绍 1.1 摘要: 基础模型的核心是“越多越好”的理念,计算机视觉和自然语言处理领域取得的惊人成功就是例证。 然而,优化的挑战和变压器模型固有的复杂性要求范式向简单性转变。 在这项研究中,我们介绍了 VanillaNet,一种设计优雅的神经网络架构。 通过避免…

ChatGPT 提示词技巧一本速通

目录 一、基本术语 二、提示词设计的基本原则 三、书写技巧 2.1 赋予角色 2.2 使用分隔符 2.2 结构化输出 2.3 指定步骤 2.4 提供示例 2.5 指定长度 2.6 使用或引用参考文本 2.7 提示模型进行自我判断 2.8 思考问题的解决过程 ​编辑 2.10 询问是否有遗漏 2.11 …

快速使用OpenVINO的 Anomalib实现训练和推理

快速使用OpenVINO的 Anomalib实现训练和推理 代码运行的结果截图 代码 import os from pathlib import Path from anomalib.data import MVTec from anomalib import TaskType from anomalib.deploy import ExportType, OpenVINOInferencer from anomalib.engine import Engine…

【第19章】Vue实战篇之主页面

文章目录 前言一、代码1. 主界面代码2. App.vue 二、展示总结 前言 登录完成之后&#xff0c;应该自动跳转到主页面&#xff0c;接下来我们搭建主界面。 一、代码 1. 主界面代码 <script setup> import {Management,Promotion,UserFilled,User,Crop,EditPen,SwitchBut…

IPV6配置一

1、接口配置 IPV6 的单播地址&#xff1b; 1)link-local (1)rl(config)#interface fastEthernet 0/0 rl(config-if)#ipv6 enable (2)手工或自动配置一个IPV6的AGUA&#xff0c;均会生成一个 link-local地址&#xff1b;但无论配置多少个AGUA地址&#xff0c;也只能生产一个link…

AIDL入门学习一

2.1.1、创建 .aidl 文件 // IImoocAidl.aidl package com.test.server; // Declare any non-default types here with import statements interface IImoocAidl { // 计算两个数的和 int add(int num1,int num2); } 然后make project&#xff0c;会生成IImoocAidl.java…

机器学习_SVM支持向量机

引入&#xff1a;在面对线性可分时&#xff0c;即用一条直线就可以区分数据的时候&#xff0c;需要将直线放在距离数据点距离最大化的位置&#xff0c;这个过程需要寻找最大间隔&#xff0c;即为最优化问题。当数据点不能用一根直线区分——线性不可分&#xff0c;就需要用核函…

网页发起 http 请求的全过程详解图

原文地址&#xff1a;https://dev.to/gallau/lifecycle-of-a-url-request-2gan

JDK中线程池(juc编程)

2.3 JDK中线程池 2.3.1 Executors JDK对线程池也进行了相关的实现&#xff0c;在真实企业开发中我们也很少去自定义线程池&#xff0c;而是使用JDK中自带的线程池。 我们可以使用Executors中所提供的静态方法来创建线程池。 获取线程池的方法&#xff1a; //通过不同的方法…

进阶必看,3种灵活操作PyTorch张量的高级方法

大家好&#xff0c;在PyTorch中进行高级张量操作时&#xff0c;开发者经常面临这样的问题&#xff0c;如何根据一个索引张量从另一个张量中选取元素。 例如有一个包含数千个特征的大规模数据集&#xff0c;需要根据特定的索引模式快速提取信息。本文将介绍三种索引选择方法来解…

java基础概念-数据类型-笔记-标识符-键盘录入

数据类型 分为两种&#xff1a;基本数据类型&#xff0c;引用数据类型 基本数据类型&#xff1a; 注意如果定义long类型变量&#xff0c;需要加L做后缀 long n9999999999L float f10.1F FL大小写都可以 练习 实例&#xff1a; 输出个人信息&#xff1a; public class text…

Danikor智能拧紧轴控制器过压维修知识

【丹尼克尔拧紧轴控制器故障代码维修】 【丹尼克尔Danikor控制器维修具体细节】 丹尼克尔拧紧轴控制器作为一种高精度的电动拧紧工具&#xff0c;广泛应用于各种工业生产线。然而&#xff0c;在使用过程中&#xff0c;由于各种原因&#xff0c;可能会出现Danikor扭矩扳手控制…

Graph RAG 的力量:智能搜索的未来

随着世界越来越依赖数据&#xff0c;对准确、高效的搜索技术的需求从未如此高涨。传统搜索引擎虽然功能强大&#xff0c;但往往难以满足用户复杂而细微的需求&#xff0c;尤其是在处理长尾查询或专业领域时。Graph RAG&#xff08;检索增强生成&#xff09;正是在这种情况下应运…

MBR60200PT-ASEMI逆变箱专用MBR60200PT

编辑&#xff1a;ll MBR60200PT-ASEMI逆变箱专用MBR60200PT 型号&#xff1a;MBR60200PT 品牌&#xff1a;ASEMI 封装&#xff1a;TO-247 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;60A 最大循环峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;200V…

Vue - 第3天

文章目录 一、Vue生命周期二、Vue生命周期钩子三、工程化开发和脚手架1. 开发Vue的两种方式2. 脚手架Vue CLI基本介绍&#xff1a;好处&#xff1a;使用步骤&#xff1a; 四、项目目录介绍和运行流程1. 项目目录介绍2. 运行流程 五、组件化开发六、根组件 App.vue1. 根组件介绍…

汉化版PSAI全面测评,探索国产AI绘画软件的创新力量

引言 随着AI技术的飞速发展&#xff0c;图像处理和绘画领域迎来了新的变革。作为一名AIGC测评博主&#xff0c;今天我们测评的是一款国产AI绘画软件——StartAI&#xff0c;一句话总结&#xff1a;它不仅在技术上毫不逊色于国际大牌&#xff0c;更在用户体验和本地化服务上做到…

GLib库对核心应用的支持

代码&#xff1a; /** main.c** Created on: 2024-6-19* Author: root*/#include <glib.h> // 包含GLib函数库 static GMutex *mutex NULL; static gboolean t1_end FALSE; // 用于结束线程1的标志 static gboolean t2_end FALSE; // 用于结束线程…