用HTML的原生语法实现两个div子元素在同一行中排列

news2024/9/30 19:27:12

代码如下:

<div id="level1" style="display: flex;">
    <div id="level2-1" style="display: inline-block; padding: 10px; border: 1px solid #ccc; margin: 5px;">
        这是第一个元素。
    </div>
    <div id="level2-2" style="display: inline-block; padding: 10px; border: 1px solid #ccc; margin: 5px;">
        这是第二个元素。
    </div>
</div>

当外层的父元素的背景设为黑色,字体为白色的情况下,效果如下:
在这里插入图片描述
当然可以把边框去掉,去掉边框的代码如下:

<div id="level1" style="display: flex;">
    <div id="level2-1" style="display: inline-block; padding: 10px; margin: 5px;">
        这是第一个元素。
    </div>
    <div id="level2-2" style="display: inline-block; padding: 10px; margin: 5px;">
        这是第二个元素。
    </div>
</div>

当外层的父元素的背景设为黑色,字体为白色的情况下,效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1362975.html

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

相关文章

ThinkPHP5多小区物业管理系统源码(支持多小区)

基于 ThinkPHP5 Bootstrap 倾力打造的多小区物业 管理系统源码&#xff0c;操作简单&#xff0c;功能完善&#xff0c;用户体验良好 开发环境PHP7mysql 安装步骤: 1.新建数据库db_estate,还原数据db_estate.sql 2.修改配置文件&#xff1a;application/database.php 3.运…

解决java接口使用spring-validation验证入参类型为List校验不生效的问题

由于 List 是接口,无法直接用于参数验证,但可以通过实现类重写 List 接口,把此实现类作为校验dto即可 dto标记: 一、直接使用 List 入参类型,不生效示例: @ApiOperation(value = "公共测试接口")@PostMapping("/testPublicApi")public CommonResult&…

IDEA TODO

今天记录一个 IDEA 工具的小技巧&#xff0c; TODO。比如下班前有一个小功能没完善好&#xff0c;此时可以在响应代码上加上 TODO 注解&#xff0c; //密码比对 // TODO 后期需要进行md5加密&#xff0c;然后再进行比对 password DigestUtils.md5DigestAsHex(password.getByt…

Linux内核--网络协议栈(一)Socket通信原理和实例讲解

目录 一、引言 二、Socket ------>2.1、socket编程 ------>2.2、Socket的创建 三、收发数据 四、断开连接 五、删除套接字 六、网络 IO 一、引言 本章开始进入linux内核中网络部分的学习,先简单介绍一下socket套接字 二、Socket 一个数据包经由应用程序产生…

系列七、Typora安装 配置

一、安装 1.1、下载安装包 我分享的链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1K5DjV_xhCH5WGiiEHlNQVQ?pwdyyds 提取码&#xff1a;yyds 1.2、安装 无脑下一步&#xff0c;下一步即可。 二、Typora中设置插入的图片左对齐 2.1、背景 往Typora中插入图…

FineBI实战(2):案例架构说明及数据准备

1 系统架构 基于MySQL搭建数据仓库基于Kettle进行数据处理帆软FineBI基于MySQL搭建的数据仓库进行数据分析 2 数据流程图 通过Kettle将MySQL业务系统数据库中&#xff0c;将数据抽取出来&#xff0c;然后装载到MySQL数据仓库中。编写SQL脚本&#xff0c;对MySQL数据仓库中的数…

【MySQL】视图,外连接内连接子查询简单介绍及面试笔试案例题

目录 一 视图 1.1视图是什么 1.2 创建视图 1.3 查看视图(两种) 1.4 修改视图(两种) 1.5 删除视图 二 外连接&内连接&子查询介绍 2.1 外连接 2.2 内连接 2.3 子查询 三 外连接&内连接&子查询案例 3.1 了解表结构与数据 3.2 案例题目 四 思维导图…

听GPT 讲Rust源代码--compiler(25)

File: rust/compiler/rustc_target/src/spec/mod.rs 在Rust的源代码中&#xff0c;rust/compiler/rustc_target/src/spec/mod.rs文件的作用是定义和实现有关目标平台的规范。 SanitizerSet是一个结构体&#xff0c;用于表示目标平台上存在的sanitizer集合。 TargetWarnings是一…

HttpRunner自动化测试工具之获取响应数据extract提取值到变量

获取响应数据 extract: 提取 注&#xff1a;extract 应与request保持同一层级 1、响应行&#xff0c;响应头&#xff1b;通过 extract 提取响应的数据并存储到变量中&#xff0c;如下图&#xff1a; 注&#xff1a;变量名的前面要有 - # 获取响应数据: 响应行&#xff08;…

GoLang:gRPC协议的介绍以及详细教程,从Protocol开始

目录 ​编辑 引言 一、安装相关Go语言库和相关工具 1. 安装Go 2. 安装Protocol Buffers Compiler 2.1 Windows 2.1.1 下载 2.1.2 解压 2.1.3 环境变量 2. macOS 3. Linux 4. 验证安装 3. 安装gRPC-Go 4. 安装Protocol Buffers的Go插件 二、定义服务 三、生成Go…

Mongodb删除操作中字符序对结果的影响

本文还是要从删除操作的语法说起。 db.collection.deleteMany(<filter>,{writeConcern: <document>,collation: <document>,hint: <document|string>} ) 删除语法中&#xff0c;可以指定数据写入策略&#xff0c;字符序和使用的索引字段。 字符序&a…

muduo网络库剖析——网络地址InetAddress类

muduo网络库剖析——网络地址InetAddress类 前情从muduo到my_muduo 概要socketaddr_in介绍成员用法 网络地址转换函数 框架与细节成员函数使用方法 源码 前情 从muduo到my_muduo 作为一个宏大的、功能健全的muduo库&#xff0c;考虑的肯定是众多情况是否可以高效满足&#xf…

我用 midjourney 创作的那些好看的图片

下面这些是个人的midjourney v5的关键词&#xff0c;各种类型都有 抽象画 One piece of original artwork from 1998 , in the style of confucian ideology, pop art-inspired collages, recycled material murals, meticulous military scenes, close-up intensity, grocer…

计算机基础面试题 |13.精选计算机基础面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Scikit-Learn线性回归(四)

Scikit-Learn线性回归四:梯度下降 1、梯度下降1.1、梯度下降概述1.2、梯度下降及原理1.3、梯度下降的实现2、梯度下降法求解线性回归的最优解2.1、梯度下降法求解的原理2.2、梯度下降法求解线性回归的最优解2.3、梯度下降法求解线性回归案例(波士顿房价预测)3、Scikit-Learn…

如何提高3D渲染速度

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 1、3D渲染快慢和什么有关&#xff1f; 渲染时间受项目的CPU和项目各类…

SpringDoc注解解析

一、什么是SpringDoc SpringDoc注解的使用&#xff0c;它是基于OpenAPI 3和Swagger 3的现代化解决方案&#xff0c;相较于旧版的Swagger2(SpringFox)&#xff0c;SpringDoc提供了更简洁、更直观的注解方式。 二、SpringDoc的注解分类 2.1 作用于类的注解 1. Tag 用于说明…

ssm基于java web 的QQ村旅游网站的设计+vue论文

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统旅游信息管理难度大&#xff0c;容错率低&#xff0c;管理…

深度解析分布式算法:构建高效稳定的分布式系统

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

频率域滤波图像复原之逆滤波的python实现——数字图像处理

逆滤波原理 逆滤波是一种在频率域进行的图像复原技术&#xff0c;常用于修复由运动模糊等因素引起的图像退化。具体步骤如下&#xff1a; **频率域表示&#xff1a;**首先&#xff0c;将退化的图像通过傅里叶变换从空间域转换到频率域。这使得图像的频率成分变得明显&#xf…